It's not how I would build it, but.. Lose the width : auto;'s, width is already auto so you don't need to define it again.
The height styles everywhere are indicative or trying to compensate from something going wrong in the design, instead of setting a height work our what's causing the content to be pushed down and fix that instead. (There are legitimate uses of height, but they're few and far between) Lastly, why is everything position relative? It's a hard one to fix, and I think you've approached the cut up in the wrong way. Work from the inside out, built up the page as a series of individual elements then bring them all together. I find it's quicker and you write much better code then by working from the outside in, or starting at the top of the page and working down. Thanks, Samuel -----Original Message----- From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Wednesday, 18 October 2006 12:12 PM To: [email protected] Subject: [WSG] set height versus height set to auto I'm still plugging along learning................ but I'm once again stumped. I've been attempting to take a Photoshop design image that was sliced and diced and make it into a tableless web page. I'm trying to get this page to look as close to the original design image ( http://www.designbyatfb.com/temp-images/ut-sample-lrg-2.jpg warning image is 214 kb) as possible. It is not fluid, it is not perfect. I'm doing this for myself, just using misc. stuff from a acquaintances site. So this is not an actual commercial site. This is a practice site for my own sake. The index page works and acts exactly as I imagined it should in FF and IE. css is located here: http://www.designbyatfb.com/temp-images/ut-web/css/main-style.css index page is located here: http://www.designbyatfb.com/temp-images/ut-web/index.html } #middlecontent{ width:auto; height:348px; position:relative } #middlelefttext{ position:relative; float:left; clear:right; height:348px; width:298px; color:rgb(0,0,0); font:10pt "Trebuchet MS",Arial,Helvetica,sans-serif; text-align:right; padding:0px 5px 0px 5px; background:rgb(255,255,255) } #middlerightimage{ position:relative; right:0px; top:0px; float:right; clear:right; height:348px; width:auto; background:rgb(255,255,255) } However, to further confuse me, this page http://www.designbyatfb.com/temp-images/ut-web/gucci.html, whose more-style.css ( http://www.designbyatfb.com/temp-images/ut-web/css/more-style.css ) is an exact replica of main-style, except I've changed the fixed heights to auto: This was my attempt to make the page expandable in height for that content area }#middlecontent{width:auto;height:auto;position:relative}#middlelefttext{pos ition:relative;float:left;clear:right;height:auto;width:298px;color:rgb(0,0, 0);font:10pt "Trebuchet MS",Arial,Helvetica,sans-serif;text-align:right;padding:0px 5px 0px 5px;background:rgb(255,255,255)}#middlerightimage{position:relative;right:0p x;top:0px;float:right;clear:right;height:auto;width:auto;background:rgb(255, 255,255)}The big challenge is the next page, or the Gucci page. This page works great in IE it adds white space under the purse image, However this page completely falls apart in FF. I am thinking it is the height in the following portion of the main-style.css . I've used font sizes in pt, I realize that is not a very good or accessible practice. I've questions too about link titles, are they necessary for accessibility? I've not run through any accessibilty tests so far. Thanks Sharron ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *******************************************************************
