Before IE7 came around, I had a great solution for setting min-height in browsers that support min-height, and IE6 using a small hack. Now I'm trying to get a min height solution for IE7 and am not having much luck.
I searched the web and found a few hacks that supposedly work in 6 & 7, as well as FF, O, etc. Some of the responders said it worked great, others said "this doesn't work in IE". I did see on MANY sites that IE7 now supports the CSS property min-height but I haven't been able to get it working. Do you have to do something special that I'm not aware of? Here's the test code I wrote:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style>
#contentbox {
background: #CCCCFF;
border: 3px solid black;
width: 400px;
min-height: 200px;
}
</style>
</head>
<body>
<div id="contentbox">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi accumsan augue ut ante. In hac habitasse platea dictumst. Donec vitae justo eu purus scelerisque hendrerit. Integer nisi ante, volutpat at, vulputate id, ullamcorper ac, orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<!--
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi accumsan augue ut ante. In hac habitasse platea dictumst. Donec vitae justo eu purus scelerisque hendrerit. Integer nisi ante, volutpat at, vulputate id, ullamcorper ac, orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-->
</div>
</body>
With the second paragraph commented out, there should be extra space at the bottom as it's not enough to reach the minimum height. Uncommented, the box should grow to accomodate the content. Firefox does both perfectly as we all know it supports min-height. IE doesn't - the box is only as big as the content needs it to be.
Is there something I need to do to make this work that I'm not doing? Thank you for your help.
