From: Holly Bergevin [EMAIL-REMOVED]]
Sent: Monday, June 27, 2005 5:31 PM
To: CSS-D; George Smyth
Subject: Re: [css-d] Width Woes Again
From: "George Smyth" [EMAIL-REMOVED]>
Date: Mon, 27 Jun 2005 15:23:35 -0400
>I am putting together a site that can currently be viewed at
>http://sacc-jobfaircom.readyhosting.com/. As far as Firefox is
>concerned, everything is working just fine. However, in Internet
>Explorer the three boxes with the images do not fit across. I thought
>that this might be due to the IE Doubles Float Margin bug, but I added
>display:inline to the <div> without any change.
>Does anyone have an idea as to why the third box is dropping below the
>other two? If I increase the size of the main <div> then they fit, but
>Firefox will show the extra spacing following the third box.
The xml declaration at the beginning of your page has put IE6 into
quirks rendering mode. In this mode, IE6 uses the same broken box model
as it's predecessors. The border and padding of the containing div do
not expand the div but take up part of the 472px total. So, even though
the content adds to 472px as well, it really has only 466px-worth of
space to display in, which is not enough (472px/container-width -
1px/left-border - 2px/left-padding - 2px/right-padding -
1px/right-border = 466px).
To fix this (for IE6) you can remove the xml declaration. Alternately,
you will need to write separate width settings for the IEs as you have
discovered since both IE5 and IE5.5/Win display the same way that IE6
does now. You can use the Tan hack (star HTML selector bug) to target
only IE, however you'll probably want to hide that from IE5/Mac, as it
doesn't have an incorrect box model rendering.
Okay, I did not realize this. Dreamweaver, which I use to get things
started, adds the xml declaration when one states that they want to use
XHTML. I occasionally forget to remove this on one of my other sites,
which goofs the font. I would really like to work with it, so I will
see if I can get the Tan hack to work (I was not able to get this to
work properly the last time I tried, but will give it another shot).
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/