You're being afflicted by IE's 3 pixel gap and because you've got images
in the left and right columns that don't give you much leeway space-wise,
you may have to float the images. You'll then need to add clear: both to
whatever follows. So:
#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: 298px;
background:rgb(255,255,255)
}
* html #middlerightimage img { float: right; } /* IE only - better
included via IE conditional comments */
#bottom-brwn-bar{
clear: both;
height:42px;
font:7pt "Trebuchet MS",Arial,Helvetica,sans-serif;
text-align:right;
color:rgb(117,86,76);
line-height:14pt;
background:url(css-images/bottom-brwn-bar.gif)
}
On Wed, 18 Oct 2006 14:06:35 +1000, <[EMAIL PROTECTED]> wrote:
Samuel, You snuck out an response as I was trying to organize my
thoughts and text. I've not had oppourtunity to digest your response
yet. I started with a tabled page created when the images was sliced up
and rendered into a html page via image ready. So in essense, I started
building the css from the top table row by turning it into a div. Why is
everything set to relative? I don't know. Why did I build it this way?
Well, cause I wanted to see if I could do it at all................from
image to css. I'm not a expert and have to learn one div at a time.
I will re read your reply and see what I can do as you suggested. Thank
you too for your response.
Thank you for the help! John,
I think I am making my, thus your confusion worse. I apologize.
index page http://www.designbyatfb.com/temp-images/ut-web/index.html
uses main-style.css with fixed heights for the middle area css:
http://www.designbyatfb.com/temp-images/ut-web/css/main-style.css This
page renders exactly right in IE 6 and FF 1.5.0.7
gucci.html http://www.designbyatfb.com/temp-images/ut-web/gucci.html
uses the same main-style.css. This page renders almost right ( except
for a small space under last image on the right side #middlerightimage
in IE the whole page falls apart in FF 1.0.5.7 (as I already know and
stated this css is using set height, which I know is wrong here for this
page).
gucci2.html http://www.designbyatfb.com/temp-images/ut-web/gucci2.html
uses my initial more-style.css
http://www.designbyatfb.com/temp-images/ut-web/css/more-style.css which
is almost identicle to the first css, all I've changed is the set height
to auto; for that middle area . This page is completely off in FF
1.0.5.7 and IE 6.
gucci3.html http://www.designbyatfb.com/temp-images/ut-web/gucci3.html
uses more-style3.css
http://www.designbyatfb.com/temp-images/ut-web/css/more-style3.css ,
with your suggested css changes. This page renders almost perfect in FF
1.0.5.7 with a small white space to the right of the images. This page
in IE 6 is dropping the right image div and cutting off the right side
of the left text div.
----- Original Message -----
From: "John Faulds" <[EMAIL PROTECTED]>
To: <wsg@webstandardsgroup.org>
Sent: Tuesday, October 17, 2006 9:41 PM
Subject: Re: [WSG] set height versus height set to auto
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.)
*******************************************************************
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]
*******************************************************************
