IE6 minimum height dilemmas

Question

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

I want the input forms to be the same height as the buttons on the right. I did this with a minimum value so that the page was still usable if the text size was larger than this height.

The problem is that IE6 does not recognize the minimum height. I could set a fixed height, but I'm worried about users resizing text outside of this. Since this is only a cosmetic problem, I am tempted to just leave it.

Any suggestions? Thanks

Answer 1

If the problem is really related to min-height working in IE6, use Min-Height Fast Hack

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

It was a long time ago, so it is easily recognizable for those who support your CSS in the future.

Answer 2

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

So, you can write a rule that is only for IE6 to fix this. Say you have the following:

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

To have the same effect in IE6, you can add a second rule that only IE6 recognizes. I usually use HTML HTML :

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

You can read it here .

Answer 3

Let me suggest a different approach. This is your goal as indicated:

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

In addition, there is a condition for allowing text changes, as indicated:

can still be used if the text size was larger than this height

Knowing that my suggestion is to base height on EM. Use EM to determine the height of the input container and button, then set the input and button heights to 100%. Thus, when the user resets their font size (from the smallest to the largest), the container will grow and shrink, and the enter / button will grow and shrink with them.

I mocked 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 sounds pretty good.

Answer 4

Thank you for message. I saw this solution around, but it did not work for me, it set a fixed height not minimum.

I did this with the solution below and downloaded CSS for IE6 just for good measure. It works on the computer that tested it, 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