IE specific CSS -- The Holly Hack

Back to CSS Tips

The “Holly Hack,” a clever CSS trick by Holly Bergevin that fixes, among other things, the infamous Internet Explorer peekaboo bug.

One particular problem is that a container of floating elements without a specified width will not render the correct size, i.e. enough to contain them and no more.

The solution to this problem comes in the form of the “Holly Hack,” :

/* Hides from IE5 –mac */
* html .somediv {height: 1%;}
/* End hide from IE5 –mac */

It does a couple things:

only IE understands the CSS selector '* html'.
The height of the div is set to be too small for the content, but IE expands the container for us to the correct size!

This box is styled differently in IE using the “Holly Hack,”

* html #wrapper {background-color: #ffffff;} /* for IE/Win */

makes the background of this wrapper white for IE while other browsers render it darker.

So, that's all pretty cool
!!!!!!!!!!!!BUT NONE OF THIS WORKS IN IE7!!!!!!!!!!!!