The Holly Hack

September 7, 2005 — 5 Comments

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 showing float bug in IE.

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 showing float bug solved in IE.

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.

5 responses to The Holly Hack

  1. 

    I have to say, that I can not agree with you in 100%, but that’s just my IMHO, which indeed could be very wrong.
    p.s. You have a very good template for your blog. Where have you got it from?

  2. 

    The template I’m using has been made by myself. I’ve updated it currently, so what you currently see is not the same template as when you first posted. Can you tell me on what exactly you disagree?

  3. 

    Dank! sehr hilfreich post!

  4. 

    Is it fine to insert a portion of this on my webpage if I post a reference to this web site?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s