Make Your Web Site Not Suck In Internet Explorer – IE CSS Min-Height Hack

Now it’s not surprise to anyone out there that I hate Internet Explorer. No I mean I really hate it! One of the reasons that I hate it so much is that it’s buggy. Call it whatever you want, maybe it’s too forgiving on bad HTML or CSS, but whatever their intentions are (forgiving sloppy code or just too lazy to interpret code right) it causes tons of problems.

The Min-Height Problem

I know a lot of you have had this problem in the past. It’s gotten so bad for me that, at one point, I’ve just stopped using them. Bottom line, Internet Explorer pretends it doesn’t see the min-height property. It uses the regular height property as a min-height. Confused? Let me make it a bit simpler:

Firefox

The height property is a fixed size. It doesn’t shrink and it doesn’t expand with content.

The min-height property is exactly what it says: it gives the element a minimum height, but it still expands with the content of the element. It’s perfect for if you have an element that will just look totally ugly if you it’s empty.

Internet Explorer

The height property is interpreted as a minimum height, funny enough. Doesn’t that suck?

IE CSS Min-Height Hack

But here’s the good news, there’s a fix/hack. Now mind you, there are tons of different ways to get around this issue. There’s conditional IE tags, there’s Javascript hacks, etc. I’ll focus on two, which I like. So here’s what we’re working with:
[sourcecode language='css']
#box {
min-height:100px;
}
[/sourcecode]

Solution/Hack One

Since, IE doesn’t understand min-height, we have to force a regular height on the element that the other browsers can’t see:
[sourcecode language='css']
#box {
min-height:100px;
}
/* mac hide \*/
* html #box{height:500px}
/* end hide */
[/sourcecode]

To me personally, this feels right (because we’re doing something specifically for IE and hiding it from other browsers), except for one thing: it involves two hacks. As the comments suggest, IE 5 (I think) for MAC does implement the height property correctly. This just gets worse and worse, doesn’t it?

Solution/Hack Two

[sourcecode language='css']
#box {
min-height:100px;
height: 100px;
}

html > body #box {
height: auto;
}
[/sourcecode]

Here’s the explanation: We set min-height for Firefox (and other well behaved browsers), then we immediately set the height property so that IE can be happy. This has the effect of, essentially, defeating the purpose of min-height for the proper browser. We then use the CSS child selectors (which, conveniently IE can’t see), to set the height back to auto and make everyone happy.

There’s a slight problem when using 100% heights that I don’t really want to get into, but you can see a fix for it here.

Why I love this hack, is because it’s a little bit cleaner. But the really great part about this is that, because we only set height to auto as a fix, we can fix multiple elements all in one line:
[sourcecode language='css']
html > body #box,html > body #box2,html > body #box3,html > body #box4, html > body #etc {
height: auto;
}
[/sourcecode]

Well folks, there we have it. The nasty subject of CSS hacks. Hope this helps.