CSS Cookbook

9.2. Delivering Alternative Values to Internet Explorer 5.x for Windows

Problem

You want to apply different CSS property values to the Internet Explorer 5.x for Windows browser, such as the value of the width property, to work around implementation of the Microsoft box model.

Solution

Put in the declaration you want Internet Explorer 5.x for Windows to handle, and then use what’s called the box model hack to put in the corrected values you want other browsers to interpret:

div#content   {
 /* WinIE value first, then the desired value the next 2 times */
 background-color: red;
 voice-family: "\"}\"";
 voice-family: inherit;
 background-color: green; 
}
html>div#content
 background-color: green; 
}

Discussion

Tantek Çelik, Microsoft’s diplomat to the World Wide Web Consortium (W3C) CSS and HTML working groups, originally demonstrated how the box model hack could be used to fix Internet Explorer 5.x for Windows’ approach to the box mode. This fix also applies to Internet Explorer 6 for Windows in quirks mode since it also uses the Microsoft box model.

CSS specifies that the width property defines the width of the content area of a box, and that any margin, border, or padding space should draw outside of that space. For example, in the following bit of code, the width of the element (as it is stated) is 500 pixels:

div#content {
 width: 500px;
 padding: 33px;
 margin: 50px;
 background-color: #666;
}

As seen in Figure 9-2, the box appears to be 566 pixels wide. The 66 “extra” pixels are from the padding ...