Preferences

hasLayout.net

Min-Height Workaround

[ Home | CSS Bugs | Min-Height Workaround ]

Table of Contents

Diagnosis

Affected browsers:
All versions of Internet Explorer below version 7.
Support status:
Completely not supported.
back to top

Overview

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.

back to top

Demo

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!

HTML Code:
<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>
CSS Code:
#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.

back to top

Solution (CCS)

This solution has side effects.

IE Versions Fixed

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!

HTML Code:
<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>
CSS Code:
#buggy,
#biggie { min-height: 100px; }
Conditional Comments:
<!--[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.

Solution (CCS) Side Effects

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.

back to top

Solution (JSS)

IE Versions Fixed

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!

HTML Code:
<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>
CSS Code:
#buggy,
#biggie
{
	min-height: 100px;
	overflow: hidden; /* only to show that
				everything works fine */
}
Conditional Comments:
<!--[if lt IE 7]>
	<style type="text/css">
		#buggy,
		#biggie
		{
			height: expression(
				this.offsetHeight <= 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.offsetHeight 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.

back to top
back to top

Comments

There are currently no comments for this article.

Feel free to post your comment. Only Comment field is required. Your e-mail will not be shown; specify it if you wish to be contacted.

Your comment
back to top

Advocacy

Browsers

Use what is right for you: "Browse Happy - Online. Worry Free. Switch today!"

XHTML

Don't use it unless you understand it. Please take some time to read these articles:

CSS and Internet Explorer

Use Conditional comments

back to top