The CSS box model
This box derives its properties from this CSS rule:
#mainbox {
margin: 6px auto;
width: 450px;
border: 1px solid #666666;
padding: 24px;
}
This box renders precisely 500 pixels wide, as evidenced by the ruler above, and does so in all version 5 (and higher) browsers - including MSIE5x Windows. But I cheated.
If you have IE5 or 5.5 (Win), have a look at this box before I fixed it.
Why is this so?
Current CSS specifications state that a box's width is the sum of its declared width plus its border and padding.
width = declared width + border + padding
So, in a standards-compliant browser our box is calculated like this:
450 (declared width) 48 (left and right padding) 2 (left and right border) ---- 500px total rendered width
But IE5x Windows renders boxes according to the declared width only. The declared width of #mainbox, in my style sheet, is 450px - and that's precisely the width that IE5x will render. Instead of adding the padding and borders to the outside of the box, it adds them to the inside.
How do I fix it?
It's a 2-step process:
- Ensure that IE6 is in Standards mode
- Write a workaround for IE5x
Use the correct DOCTYPE
MSIE6 gets the box model right - but only if it is running in Standards mode. To make sure that MSIE6 is in standards compliant mode you must include the right DOCTYPE at the beginning of your document. I use this DOCTYPE:
The key is to include the hyperlink to w3.org. Omit the link and IE6 will render in Quirks mode causing it to behave as if it were IE5.
An IE5x workaround
IE5x renders the declared width - period. Our solution entails telling it that the declared with is 500 pixels instead of 450 pixels. My preferred method of doing this is to use Microsoft Conditional Comments. Because Microsoft has so many proprietary features that are often used by intranet developers, it has provided a means to feed specific code to specific versions of Internet Explorer. So we have a means to include a special style rule that is read by only the IE5x series of browsers and ignored by all other browsers - including IE6. Here is the code:
<!--[if IE 5]>
<style>
#mainbox {width: 500px;}
</style>
<![endif]-->
Notes
The opening comment [if IE 5] means that all IE versions in the 5-series will read and act upon what is between the coments. So the above code will be run by IE5.0, IE5.01, IE5.1, and IE5.5. It will not be run by IE4.99 (or lower) or by IE6 (or higher).
The conditional comment must be inserted in your page and preferably just above the closing </head> tag.
Conditional comments cannot go inside external style sheets, which might be a drawback for some people. However, if you are using any sort of Template or Include technology, then it's a very efficient solution and (in my opinion) preferable to complex hacks and filters.
Conditional comments can include an embedded style (as in this lesson) or it can contain a link to an external CSS file that houses all of your IE fixes in one neat package.
Box logic
Of course, if you throw a very wide image in your box (in this case, greater than 450px wide), or have a very long string of text without spaces, then please see the table doctor for advice because your CSS box will burst its boundaries. Designing with CSS boxes entails a bit of logic that is just a bit different from table layout practice.
Bonus
If you peek inside the source code of this page, you'll find that I've used my Conditional comment to center this box in IE5x.
Enjoy.