3.1 IE Box Model Bug

This is the infamous and most noted IE bug. If the width property is omitted from an element, such as a container div, most browsers will calculate the overall width for that element as being:

Contents + padding + border thickness + margin.

If the width is specified, then again most browsers will calculate the overall width for that element as being:

Width + padding + border thickness + margin.

Unfortunately Internet Explorer 6 is nortoriously different and will take any specified width as being the total width regardless of padding, border and margin. Therefore a web page may render completely different in IE6 compared to width-compliance browsers: in other words, the layout may break.

Fixes

Additional styling known as "hacks" are often required in the stylesheet to allow for this (note that IE7 works fine) otherwise webpages may not look right in those browsers.

For example, a div box like the following would be 140px wide in width-compliant browsers, but 100px wide In IE 6:

.box	{width: 100px;
 	padding: 10px;
 	border: 10px solid;}

To fix this we need to add additional code to the style sheet:

.box	{width: 100px;}

.box	{\width: 140px; 
	 w\idth: 100px;}

The first width setting (100px) is for width-compliant browsers like Mozilla and Opera. These will choke on the escape character (\) and so will ignore the second and third width settings. The second property (\width: 140px;) is for IE 5 and IE 6/quirks mode. The final line (w\idth: 100px;) will be read by escape friendly browsers (including IE 6 in non-quirks mode) and set the width back to 100px. However, this isn't perfect as Netscape 4 crashes at the escape characters.

The Tan Hack

This hack relies on a quirk of IE5 & 6 (quirks mode). IE assumes the html tag is not the root element of a document and that there is an extra element outside of this. By selecting for that element, IE can be forced to read CSS that other browsers, including Netscape 4, will ignore. This is selected using the star symbol followed by html. (Note the helpful comments in the code. These are wrapped with /*and */ ensuring the browser won't read them.)

div		{width: 100px;
 		padding: 10px;
 		border: 10px solid #000;}

*html div	{\width: 140px; /*for IE5 &6 in quirks mode */
 		w\idth: 100px;} /*for IE6 in standard mode */

Perhaps the best way to avoid problems with IE's non-compliance with the box model is to apply any padding and margin to the contents of any divs, rather than to the divs themselves, and avoid using side borders (background colours can be used to highlight column divs instead).

For example, rather than:

#container	{display: inline;
		float: left;
		width: 600px;
		padding:: 0px 20px 0px 20px;}

It may prove better to have:

#container	{display: inline;
		float: left;
		width: 600px;}

p		{padding: 0px 20px 0px 20px;}