IE has problems displaying MIN-Height

[slava]

Finally i found out how to set a min-height to my pages and i've got a problem!
FireFox perfectly displays the divs, the height i specified, but IE6 scrolls down to the infinite, and i dont know how to stop it.
is there anyway to solve it? with a max height or something????

Here is the CSS code i used:


#bodycontent {

float: right;
background-color: #fefaf6;
border: solid 1px yellow;
border-left: solid 1px red;
border-top: solid 2px red;
width: 590px;
min-height: 600px;
max-height: 1024px;
padding: 18px 0 16px -250px;
margin: -20px 0 0 -20px;
}
* html #bodycontent {
height:expression(Math.max(this.offsetHeight-2, 600)+'px');
}

[jscheuer1]

It would be something like:


height:expression(Math.min(1024, (Math.max(this.offsetHeight-2, 600))+'px');

However, a layout that is dependant upon max and/or min dimensions may be able to be simplified so as to not require them. If so, that is the way to go.

[andrewmta]

I'm not positive if this is the info you're looking for, but this is a cross browser hack that fixes min-height.


div {
min-height:100px;
height:auto !important;
height:100px;
}

[jscheuer1]

I'm not positive if this is the info you're looking for, but this is a cross browser hack that fixes min-height.


div {
min-height:100px;
height:auto !important;
height:100px;
}

That seems to work out well in a simple trial!

[slava]

Hey man,
thanks a lot, this really helped me fix that problem, and now it's perfect!

[Twey]

Yes, IE ignores min-width and min-height because it expands elements past their width and height if necessary. Thus, width and height in IE behave like min-width and min-height in other browsers. The only problem is that there's nothing that behaves like width and height do in other browsers in IE :)

[jscheuer1]

Yes, except for IE 7. Fortunately that and the other browsers use the min-height and the !important style. However, if there were to be a later style for width for that element, they would also ignore it while IE 6 and earlier would follow it. That is a potential problem.

In a somewhat related matter. When I tested this out (using a 1px solid red border as an aid to gauge the height of the elements visually), I used one div with a short line of text in it and another with a huge image. The one with the short text behaved exactly as expected in several browsers. However the one with the image respected the height of the image in all browsers but, not its width. All except IE 6 cut off the division at the end of the viewable portion of the body element, even though there was a horizontal scrollbar present.