Internet Explorer 7 and the Holy Hack

Internet Explorer 7 fixed the "* html" bug (also known as the "mysterious container bug"). The W3C specifications say that "* html" should select no elements, but browsers older than IE7 used to select a mysterious container at the root of all elements. Unfortunately this bug was often used as feature in order to provide layout for some elements and avoid the nasty float bugs; as a result, IE7 becomes very crippled with pages using this feature.

As one can imagine, IE7 still has some major problems with float layouts, so a fix is still needed. The solution is actually very simple, by using conditional comments (supported only by IE browsers, yet ignored during validation) one can tell IE 7 to ignore the Holy Hack fix for Internet Explorer 6 and older, and provide a separate fix for IE 7.

Here's a snippet of a HTML page:

<link href="/stylesheets/stylesheet.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]><link href="/stylesheets/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]><link href="/stylesheets/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

With this, we are separating the browsers: compliant browsers stop at the first stylesheet, while Internet Explorer family members will scout the next two stylesheets as well; versions older than 7 will follow the "ie6.css" stylesheet, while IE7 will follow "ie7.css".

Now let's place the Holy Hack in the "ie6.css" file:

/* Holly Hack */
/* Hides from IE5-mac \*/
* html .buggy_container {height: 1%;}
/* End hide from IE5-mac */

And the fix for IE7 in "ie7.css":

.buggy_container {
     zoom: 1;
}

This solution should solve some float bugs in Internet Explorer, yet maintain the compatibility with the latest member of the family. Of course, as with most hacks, there might be some other ways to fix the problems as well.