Getting Internet Explorer to Play Well with CSS

Why Do We Need a Box Model Hack?

The CSS box model defines the width and height of a box created with CSS as the width or height of the content area of said box. If the width property is left off, then the box is as wide as the content within it. The same goes for the height. If padding, borders, or margins are added to the box, they are added outside of the content width or height.

However, versions of Internet Explorer before IE6/strict don't work this way. In their DOM, the width of the box is the width of the content plus any border or padding. Thus, a 100px box with 0 padding and 0 border would render the same in IE as in Mozilla. However, if 5px padding is added, the Mozilla box (including content and padding) would be 110px wide, while the IE box would still be 100px.

If a 10px border is also added, the Mozilla box (including content, padding and border) would be 130px wide, while the IE box would still be 100px. Finally, if you added 10px margin on all sides, the Mozilla box would be 150px while the IE box would then grow to 120px (100px for the content, padding, and border, and 20 for the margins on left and right).

Internet Explorer does not render the box model correctly. If you want your Web pages to look the same no matter what browser views them, then you have to do something to offset this incorrect rendering of the box model.

What is the Box Model Hack

In basic terms, the box model hack uses bugs in Internet Explorer to force it to use CSS tags that other browsers will ignore.

If you have a div like this:

div {

width: 100px;

padding: 10px;

border: 10px solid #000;

}

It will be 140px wide in valid browsers, and 100px wide in Internet Explorer.

To fix this you need to set up two div selectors, one which defines the width for compliant browsers at 100px and one for IE at 140px.

div {

width: 100px;

}

div {

\width: 140px;

w\idth: 100px;

}

The first line "width: 100px;" is for browsers like Mozilla and Opera that render correctly. Opera and other browsers choke on the escape character (\) and so will ignore the second and third properties. The second property "\width: 140px;" is for IE 5 and 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. The problem here is that Netscape 4 crashes when it sees escape characters in the property names, so this isn't done yet.

The Tan Hack

The Tan Hack relies on a quirk of IE 5 and 6 (quirks mode). IE believes that the html tag is not the root element of a document. There is an extra element outside of the html element which IE considers to be the root. By selecting for that element, you can force IE to read your CSS, while other browsers, including Netscape 4, ignore the style completely:

div {

width: 100px;

padding: 10px;

border: 10px solid #000;

}

* html div {

width: 140px; /* for IE5 and IE6 in quirks mode */

w\idth: 100px; /* for IE6 in standards mode */

}

So the next time you build a Web page for both Netscape and IE you can insure that your page displays correctly with these simple hacks. And hopefully, IE will eventually render CSS according to the standards.