IE6 min-height dilemma

Question

Here is my site: http://smartpeopletalkfast.co.uk/ppp/home-page.html

I want the input forms to be the same height as the buttons to their right. I've done this with a min-height value so the page would still be usable if the text size was set to greater than this height.

The problem is that IE6 doesn't recognize min-height. I could set a fixed height, but I'm worried about users resizing the text beyond this. As it's only a cosmetic issue, I'm tempted just to leave this.

Any suggestions? Thanks

Answer 1

If the issue is indeed just getting min-height working in IE6, use the Min-Height Fast Hack:

selector {
    min-height:500px;
    height:auto !important;
    height:500px;
}

It's been around for a long time, so it's easily recognizable for anybody maintaining your CSS in the future.

Answer 2

In Internet Explorer 6, height is treated as min-height and min-height is not supported.

So you can write a rule which targets only IE6 to fix this. Let's say that you have the following:

#navigation .nav-menu-item {
    min-height:50px;
}

In order to have the same effect in IE6 you could add a second rule which only IE6 will recognize. I tend to use the star HTML hack:

#navigation .nav-menu-item {
    min-height:50px;
}
* html #navigation .nav-menu-item { /* for IE6 */
    height:50px;
}

You can read more here.