IE Height Fix

What's the difference?

[Wlauzon]

I came across this fix (?) to make both IE6 and IE7 act the same for the height of a div.

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

That seems to work, but how is it any different from this? I guess maybe I don't understand the purpose of the auto!important;?:

selector {
height:500px;
min-height:500px;
}

[edited by: Wlauzon at 8:09 am (utc) on Oct. 20, 2006]

[RussellC]

I don't know how it works either but thank you for posting it. I have been looking for a solution for my intranet for a while. Thanks.

[DrDoc]

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

First, let's define the difference between

height

and

min-height

. Height is a fixed height. "I want it this height, darn it! This height -- not more not less." Min-height is, as the name indicates, a fixed minimum height. "I want it to be at least this height, darn it! This height, possibly more, but certainly not less." An

!important

declaration can be likened to an override. It allows you to declare an overriding property, which will be considered taking precedence even if there are other rules with the same specificity declaring something else.

Standards compliant browsers (which now, for this exercise, also includes IE7) behave just that way. IE6, on the other hand, does not understand

min-height

at all. And, furthermore, it treats

height

as if it were

min-height

. Additionally, IE6 ignores

!important

.

Now, let's look at each declaration individually.

min-height: 500px;
This declares the minimum desired height to 500px.

height: auto !important;
Let the actual final height auto-adjust (while obeying the declared min-height, of course). Even though

auto

is the default for any element's height, we want to declare it because of the following rule.

height: 500px;
Declare the fixed height as 500px.

Now, why does this work? Well, standards compliant browsers will see:
min-height: 500px;
height: auto;

IE6, on the other hand, due to ignoring

!important

and not understanding

min-height

, will see:
height: 500px;

Due to the incorrect implementation in IE6, in all browsers we now get an element which is at least 500px tall, but will stretch to accommodate whatever additional height is necessary.

[Wlauzon]

Ah. OK.. thanks Doc.

I can see that it works, and seems to work better than all the other IE6 + IE7/FireFox height "hacks" I have tried, but was a bit (ok, a lot..) confused over the use of the!Important.