This bug affects: IE6
min-height property is ignored
Fri Jul 17 13:07:16 2009
Not only IE does not properly support height property it also completely fails to recognize min-height. Luckly, one bug complements another quite nicely. About that in a second. Let's take a look at the demo first.
I CAN HAS MIN-HEIGHT!
Lorem ipsum
dolor sit amet,
consectetuer adipiscing elit.
Suspendisse vel velit at ipsum
tristique porttitor. Suspendisse
potenti. Nam non arcu sit amet
nulla volutpat bibendum. Aenean
I CAN HAS MIN-HEIGHT!
<p id="buggy">I CAN HAS MIN-HEIGHT!</p> <p id="biggie"> Lorem ipsum<br> dolor sit amet,<br> consectetuer adipiscing elit.<br> Suspendisse vel velit at ipsum<br> tristique porttitor. Suspendisse<br> potenti. Nam non arcu sit amet<br> nulla volutpat bibendum. Aenean<br> </p> <p id="normal">I CAN HAS MIN-HEIGHT!</p>
#buggy, #biggie { min-height: 100px; }
Not much to say here. We have three paragraphs, two of them (#buggy and #biggie) have min-height of 100 pixels applied to it. In standards compliant browsers #buggy will be 100 pixels high since there is not enough content (as in #biggie) and we have min-height set. In Internet Explorer versions below 7 both, #buggy and #normal will look identically because min-height property is completely ignored.
Below are solutions for the above bug ordered by the solution type.
Fri Jul 17 13:20:02 2009
all of the affected
I CAN HAS MIN-HEIGHT!
Lorem ipsum
dolor sit amet,
consectetuer adipiscing elit.
Suspendisse vel velit at ipsum
tristique porttitor. Suspendisse
potenti. Nam non arcu sit amet
nulla volutpat bibendum. Aenean
I CAN HAS MIN-HEIGHT!
<p id="buggy">I CAN HAS MIN-HEIGHT!</p> <p id="biggie"> Lorem ipsum<br> dolor sit amet,<br> consectetuer adipiscing elit.<br> Suspendisse vel velit at ipsum<br> tristique porttitor. Suspendisse<br> potenti. Nam non arcu sit amet<br> nulla volutpat bibendum. Aenean<br> </p> <p id="normal">I CAN HAS MIN-HEIGHT!</p>
#buggy, #biggie { min-height: 100px; }
<!--[if lt IE 7]>
<style type="text/css">
#buggy,
#biggie { height: 100px; }
</style>
<![endif]-->
Recall the Expanding Height Bug. Since IE versions below 7 do not restrain element's height, but instead let it grow as needed we will use that bug to solve our min-height support.
We will use Conditional Comments to target IE versions below 7 (remember, IE7 treats height property correctly) and apply height with the same value as we have used for min-height. Viola, problem solved.
Side effect is relatively minor. Affected browsers treat height almost the same way as standard compliant browsers treat min-height. However, there is an exception. IE will hide or scroll excessive content if overflow property is used on the element.
Fri Jul 17 13:31:20 2009
all of the affected
I CAN HAS MIN-HEIGHT!
Lorem ipsum
dolor sit amet,
consectetuer adipiscing elit.
Suspendisse vel velit at ipsum
tristique porttitor. Suspendisse
potenti. Nam non arcu sit amet
nulla volutpat bibendum. Aenean
I CAN HAS MIN-HEIGHT!
<p id="buggy">I CAN HAS MIN-HEIGHT!</p> <p id="biggie"> Lorem ipsum<br> dolor sit amet,<br> consectetuer adipiscing elit.<br> Suspendisse vel velit at ipsum<br> tristique porttitor. Suspendisse<br> potenti. Nam non arcu sit amet<br> nulla volutpat bibendum. Aenean<br> </p> <p id="normal">I CAN HAS MIN-HEIGHT!</p>
#buggy, #biggie { min-height: 100px; overflow: hidden; /* only to show that everything works fine */ }
<!--[if lt IE 7]>
<style type="text/css">
#buggy,
#biggie {
height: expression(
this.scrollHeight <= 100
? "100px"
: "auto"
);
}
</style>
<![endif]-->
Once again, markup and CSS code are the same as in the original demo. I have added #buggy, #biggie { overflow: hidden; } only to demonstrate that overflow is not an issue anymore as it was with "Solution (CSS)".
What makes the fix tick is the proprietary expression() value for the height property inside Conditional Comments which, once again, target IE versions below 7. It allows us to execute JavaScript code right in the stylesheet and assign the return value to the property it is the value of.
If you are not familiar with JS I will explain what the code inside expression() does. First, it gets the height of the elements matching the selector (#buggy, #biggie). Then using ternary operator we will choose which height we will assign to the height property (in CSS code). Ternary operator basically works like this: "true or false value" ? "return this if value is true" : "return this if value is false". Thus our JS code says: Is height of this element less than or equal to 100 pixels? If yes, set height to
.100px if not set it to auto
Keep in mind that height returned by this.scrollHeight will be in pixels, if you need some other unit use JavaScript code that will calculate an appropriate unit, this is beyond the scope of this tutorial.
Alternatively you may use MinMax script provided by DoxDesk. The script provides IE support for min-width, max-width, min-height and max-height properties (neither of which are supported in IE versions below 7). I saved a local copy of the script which you may use in case DoxDesk's link is broken. Simply include <script type="text/javascript" src="minmax.js"></script> inside your <head> tag and script will do its magic.
Currently there are no posted comments.
If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.
Alternatively, purchase my book: 