So what happened on this page??
Lets have a look at what is causing this problem. Yes, a picture tells a thousand words, and what we have is two very different interpretations of what constitutes width by -
(a) the W3C standards, and
(b) as implemented by Internet Explorer.
Simply put, the W3C standard specifies that -
width = content + (padding + border + margin).
But Internet Explorer deals with these items in a different manner, i.e.
width = (content + padding + border) + margin.
All very confusing, but the practical implications are that the W3C box model once given a width will expand if borders and padding are added. This is overcome by using max-width, in which case the inline content will adjust, but if there are block level items in the content and their width(s) exceed the max-width dimension of the container, items may be displaced and layout will be broken.
Internet Explorer browsers up to and including IE 7 did not have the ability to set max-width for a container and their width represents a minimum width. The consequence of this is that when content got squeezed the container would expand, or the content overflowed outside the container.
The differences between both methods of rendering are significant, but most can be overcome by not declaring any padding in the container and applying margins to inline or block level elements within the container to achieve the same effect. In the case of the non-compliant IE browsers, it is possible to set a max-width in your CSS by using a javascript:expression that is recognised only by IE browsers versions earlier than IE 8.
Here's an example:-
We have a container that is not to exceed a width of 800px and it also has a border of 2px on both sides. For W3C compliant browsers the CSS is -
#content { width:100%; max-width:800px; border:solid 2px black; }
To achieve the same effect in the non-compliant IE browsers, the following CSS needs to be applied as a Conditional Comment in the head of the page (see also the Note below) -
<!--[if lte ie 7]>
<style>
#content {
width:expression(document.body.clientWidth > 803 ? "804px" : "auto");
}
</style>
<![endif]-->
In the above expression, always ensure that the clientWidth > is one digit less than the "required" value, otherwise a circular function will result. Not good for the processor!
NOTE: On the otherhand, there is no reason not to include the width:expression in your standard CSS, as other than throwing an error if validating, like all styles that are not understood by a browser, it is just ignored. The same expression shown above is used in the styles of this page.
Here's a useful tip for those who find that there is no margin at the top/bottom of their page in Internet Explorer browsers when there should be! Internet Explorer suffers from another malaise known as "hasLayout" - a rather complex issue that need not be explained here. However, the "quick fix" for the problem in question is -
<body>
<span></span>
<div id="wrapper">
<!-- page contents -->
</div><!--wrapper-->
<span></span>
</body>
So all it took was a span element to be placed between the body and wrapper div - both opening and closing. You don't even have to load it with a as the page is not going to validate - it has no Doctype! But wait, the real "quick fix" is to use a valid Doctype and the problem will resolve itself!
How do I ensure that my page will render in Standards Mode? Easy! Just select the appropriate Document Type Declaration from the W3C list at www.w3.org/QA/2002/04/valid-dtd-list.html and insert before the <html> tag. This shouldn't really be said, but the simple way of ensuring Standards Mode rendering is to use the shortform DTD, i.e. <!Doctype html> and your browser will automatically detect whether the content is in XHTML or HTML and render accordingly. You will still need to use a regular DTD when validating a page.
If you are designing a page using a W3C compliant browser, then it is extremely important that you use a Doctype, not that it will have any real benefit to what you see, but it will certainly ensure that the users of older Internet Explorer browsers see what you do. Over 50 percent of all browsers out there fall into the IE 7 and earlier versions category.
Finally, remember the magenta line in the box rendered at the top of the page? Well, in the Standards Mode it rendered as a line of 300px width and 2px height, but in Quirks Mode it is rendering with a height of 17px. This is also caused by the mysterious "hasLayout" condition Internet Explorer suffers from. In fact the line is just a div that has decided to insert an extra "hidden" 15px of height over that declared in the CSS. This is just another example of the quirkiness of the IE browsers where a div in Quirks Mode doesn't necessarily have layout, but the table element does.
Lets substitute the div for a table (using the same CSS) and see what happens. As you are using a W3C compliant browser, an image as rendered by the non compliant IE browsers will be displayed.
P.S. Another solution is to put <span></span> tags in the div, which then acquires layout.