IE min-height issue solved

May 24, 2007

I’m revamping one of my client’s websites, and had an issue with a banner bar (with graphics and text of various sizes and length) that rendered badly in IE6. Among other CSS standards, IE6 doesn’t recognize the min-height attribute. It’s been the last thing for me to figure out before completing this job, and I’ve put it off until today. I tried a couple of things, then went out Googling and found some reasonably convoluted solutions and hacks. Then I found Phil Ledgerwood’s blog (Update 7 Sept 2008: His blog appears to be offline…) where he offers the quickest, most practical solution. It was all sorted in about 1 minute flat!

In case his blog post ever goes missing, here’s the solution:

If you use an underscore in front of normal CSS properties, IE will process them, but other browsers will not. In practice, this allows you to specify “alternate IE settings” for virtually any CSS property. This is known as the Underscore Hack.

So, to set a minimum height, first use the actual property:

min-height: 300px

then use the underscore hack to set the height property.

_height: 300px

All browsers but IE will ignore the hacked property, and since IE effectively treats height as min-height, you’ll get the effect that you want in all browsers.

Thanks Phil!

One comment

  1. Good! Works fine in IE6 and IE7… There are other methods but this is quite easier than displays as a table-layout: fixed;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: