The Box Model Problem

By: John Gallant , Holly Bergevin ,

Page 2 of 2

Breaking down the Tan hack

Let's take the code for the example box above and apply the Tan hack to it.

HTML:

<body>
<div>content goes in here<div>
</body>

CSS:

div {
	width: 100px;
	padding: 10px;
	border: 5px solid black;
	margin: 10px; }

* html div {  /* This is the Tan hack */
	width: 130px; 
	w\idth: 100px; }

Don't panic! This is really easy, trust me. First, look closely at the hack. See the star at the beginning of the selector? That's the universal selector, which applies to all elements. Next comes a space, and then "html" (the root element), another space, and last the targeted element, "div".

Well, "html" is supposed to be the root element. All versions of Internet Explorer seem to believe that there is a mysterious "wrapper" element surrounding "html". The selector in question (* html div { }) picks out any div that is enclosed (however deeply) inside "html", if "html" is enclosed in any element whatsoever. IE thinks that the star refers to this "wrapper", and then sees that yes indeed, "html" is enclosed inside it. Only IE believes this condition exists.

However, all other browsers see "html" as the true "root" element, and so the star can't refer to any real element. This causes all non-IE browsers to ignore all rules following that selector. Thus, the entire Tan hack is totally invisible to all browsers except Internet Explorer. Still with me?

In this way we have gotten IE's sole attention, and now the task is to feed that "width: 130px;" to IE5.x/win and not to IE6 or IE5/mac.

Tip: In the hack selector, the star and "html" parts are required, but the div I gave as an example would, in practice, be replaced by the element to be targeted. Instead of "div", it could be "p", "ul", ".myclass", or whatever you need. It is best to be as specific as possible in order to target only those elements that require different values.

Now, let's look at the hack again:

* html div {
	width: 130px; 
	w\idth: 100px;
}

The "width" for standard browsers has already been given in the main (non-hack) code block, and all IE browsers now see and apply "width: 130px". That takes care of IE5.x/win, but what about IE6 and IE5/mac? That's why there is a second width property with that escape inside it. It turns out that IE5.x/win cannot handle any property name having such an escape within it, but IE6 and IE5/mac correctly ignore the escape, and apply the second "width" value. Hey presto! We have just fed a separate width value to the one browser that needs it, and no other. That was easy!

Things to watch out for

Most important is the placement of the escape. It must be inside the property name (whatever that may be), and it must not come just before any of the first six alphabetical characters, meaning: a, b, c, d, e, or f. If this is done it will be interpreted as a "hex" character, messing up the hack. Luckily, all property names have at least one suitably "escapable" character, so it's no big deal, as long as those first six are avoided. I placed the escape just before the "i" in "w\idth", obeying this condition.
The Tan hack does its job well and won't cause trouble for with version 5 and above browsers, but IE4.5/mac may have trouble with it. You will need to test to be sure.
If IE6 is in quirks mode it will be using the old box model, and will need the same "width" value that IE5.x/win does. However, IE6 will still not be fooled by the escape, and will read the escaped value, thus defeating the hack, and rendering a smaller than desired box. Make sure the doctype you use puts IE6 in "standards" mode.

Note: using an <?xml...?> declaration at the top of the document, while recommended for some doctypes, will wrongly throw IE6 into "quirks" mode. It is not required, so be careful if you use the declaration, and test thoroughly! (See the Rendering Mode and Doctype Switching article at CMX for more on this topic.)

If your page must be in "quirks" mode for some reason, doing something different with the Tan hack may be necessary. First, the Tan hack is modified by removing the second value (the one with the escape in it). That way IE6 gets the same value as IE5.x/win. But now IE5/mac (which does not go into "quirks" mode) will also use that value, and get it wrong. So, to hide the Tan hack from IE5/mac, do the following:

div {
	width: 100px;
	padding: 10px;
	border: 5px solid black;
	margin: 10px;
}

/* A CSS comment before the hack \*/
* html div {
	width: 130px; 
}
/* Another CSS comment after the hack */

Look at the top comment. See that escape just before the closing tag? Because of that escape, IE5/mac fails to recognize the closing tag, and so fails to read the entire Tan hack. The second comment below the hack provides a closing tag for IE5/mac's benefit. In this way, IE5/mac reads only the value in the normal code block before the hack. This Mac hack, called the Commented Backslash hack, was discovered by Sam Foster. Version 2, the one we're using here, was suggested by James Craig.

Conclusion

Until IE5.x/win is history, the Box Model Hack will remain the single most important hack in CSS. It's not going away soon folks, so get used to it.

Coming soon

You may have heard that @importing a CSS file hides that file from Nav 4, but hiding individual rules from Nav 4 is also possible, and will be covered in in another CSS hack article.

Please see the following links for more information on the hacks used in this article.