The Holly Hack

Today I found out about a solution to the Internet Explorer problem I recently had with [my fotoalbum](/2005/08/my-fotoalbum/). I read about the Holly Hack that prevents Internet Explorer on Windows to behave abnormally and found out it may be a solution to my problem too.

### The Problem ###

Image 1: fotoalbum float bug (IE)

In my fotoalbum I use a div for the content containing left-floated div’s (album covers and image thumbnails). This content div has a right margin such that the information div on the right side will not be overlapped by them. Mozilla Firefox does this very well, IE doesn’t like it that much. Below the bottom of the information div the thumbnails are floating to the right, ignoring the right margin. As you can imagine I was not quite happy about it. But that’s the way it is I thought.

### About Hacks ###

Normally I don’t like browser hacks that much. They can be useful, but you never know in what way the next version of a browser is going to behave. Most hacks work around IE bugs, where there’s no other solution. I prefer using conditional comments when it comes to check for IE.

### Solution – the Holly Hack ###

Image 2: fotoalbum float bug solved (IE)

The Holly Hack uses a CSS rule, that other browsers than IE simply ignore. `* html { … }` is being assigned to an html element lying in any element in the DOM. Because the html element is the root element, standard compliant browsers do not apply this rule to any element. IE does. IE also needs a so called “hasLayout” property to be set to true – otherwise the dimension of the element will not be determined. So the CSS will look like this when applied:

* html {
height: 1%;
}

This time I found this hack useful, so I tried applying part of it to my style. I left out the `* html {}` snipped and only applied height: 1% to the `#content` rule to see what happens.

#content {
…
height: 1%;
…
}

It tells the element with id “content” to have a height of 1% of the visible browser height. That might have created other problems, so that I would have to use a workaround for that, but hey – it worked the way I hoped it would do! IE now floats correctly around the information div.

### Conclusion ###

When you use floating of elements be very careful with IE. An element with no dimension (width, height, display) containing floated elements may be rendered abnormally and cause your layout to fail. To avoid this use a height or width where possible. If you can’t avoid it see if this workaround may help and doesn’t create more problems – else use conditional comments to import a special stylesheet.