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 m

Answer 1

Allow me to offer a different approach. This is your goal, as stated:

I want the input forms to be the same height as the buttons to their right.

Plus, there is a condition of allowing for text resizing, as stated:

still be usable if the text size was set to greater than this height

Knowing that, my suggestion is to base the height on EMs. Use EMs to define the container height of the input and the button, then set the heights of the input and button to be 100%. This way, as the user resets their font size (from smallest to largest), the container will grow and shrink, and the input / button will grow and shrink with them.

I've mocked up a simple example at the following url: http://jsbin.com/oguze5/2/edit

Things will need to be changed for styling purposes, but the general idea / concept is pretty sound.

Answer 2

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 3

Thanks for your post thirtydot. Ive seen that solution around but it didnt work for me, it set a fixed height non a minimum one.

Ive done it with the solution below and loaded the CSS for IE6 only for good measure. It works on the computer ive tested it on, I just hope it works for all IE6 computers:

http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/

Thanks

Answer 4

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.