Minimum height problem in Internet Explorer 6 – Solved!
Ever need to set a minimum height of an element? That’s easy, just use the min-height:(whatever height); CSS property! The only problem is Internet Explorer 6.0 doesn’t properly honer the min-height attribute. Internet explorer treats the “height” attribute the same as a min-height.
So, you can set a minimum height in IE6 by simply using the “height” attribute. I’d recommend using an underscore before “height” to target only IE6, and use the min-height as well for every other browser which supports it. Example: _height:90px;
Example of minimum height problem and solution in Internet Explorer 6.
This text is too short!
Added “min-height:90px;” for all browsers besides IE6
Added “_height:90px;” for only IE6
Styles
.min-height-post { color:#fff; }
.min-height-post div {
margin:0 0 20px 60px;
padding:10px 10px 10px 110px;
border:1px solid #ccc;
background:url(http://www.nothingarbitrary.com/wp-content/images/height-bkg.jpg) 10px 10px no-repeat #303f42;
}
.min-height-post .min-height { min-height:90px; }
.min-height-post .ie6 { _height:90px; }
Tags: CSS, height, ie6, internet explorer, min-height