IE <= 6 will expand heights to contain content. Other browsers won't. The
reason why everything's getting messed up in FF & Opera is because of the
set heights. Editing your CSS in FF, I made these changes and it looked OK:
#middlecontent{
}
#middlelefttext{
float:left;
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{
margin-left: 300px;
background:rgb(255,255,255)
}
Even on your index page, you probably don't need to set a height; just
make sure whatever content follows after the image is cleared properly as
the text next to the image is floated. (At default text size, the image is
longer than the text anyway, so the the need to clear the following
content won't appear as apparent until the content or text size is
increased and becomes longer than the image.)
On Wed, 18 Oct 2006 12:12:03 +1000, <[EMAIL PROTECTED]> wrote:
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{position: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:0px;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]
*******************************************************************
--
Tyssen Design
Web & print design services
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
