IE min-height issue solved

24 05 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 recognise 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 Sept 2008: this 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!



25 responses

30 05 2007

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

12 04 2008

by this way my was solved but text is not scrolled.

12 04 2008

By this way my problem was solved but text is going beyond the min-height specified.

12 09 2008
Expanding column issue - solved! « At Random

[…] image) and border to expand to the length of the content in the main section. I was able to set a min-height to force it to be at least a certain length for the shorter pages, but for the longer pages, the […]

20 09 2008

It worked great! Thanks

13 11 2008

Thats really helpful, my project was on hold because of that, thanks a lot!!!!

16 01 2009

Thanks for the fix, Solved my problem!

Another way to do this is to have an IE only sheet by using.
So browsers such as Fire Fox don’t have to read the BS that IE needs…

5 02 2009
Johannes Fahrenkrug

Thank you so much.
Things I’d rather do than develop for the IE: poke my eye out with a rusty nail.

26 07 2009
Andrew Abogado

Thank you, thank you, thank you. Works like a charm in IE6.

8 12 2009

Geeeenius…….thanks a lot

27 05 2010

Good solution, Really thanks very much

17 06 2010

Great solution! Thanks! ;-D

29 11 2010

nice help!

3 12 2010

Came in extremely handy. Thank you

2 01 2011
2010 in review « At Random

[…] IE min-height issue solved May 2007 14 comments 4 […]

11 01 2011

Thanks for re-posting such simple solution but vital info!!!

28 01 2011

THANK YOU VERY MUCH!!!!!!!!!!!!!!!!!!!!!!!!!

6 05 2011

… it doesn’t work on anything I tried it on. The sites I build have to have seperate ie6 and 7 stylesheets though so I have this bit in ie6.css and ie7.css >> /* content min-height workaround */
#content { height:1000px; } < that works.

24 05 2011
Amit Kalhan

Thanks Its Works Fantastically

10 06 2011
Popup Window

It’s working as expected. Thanks.

4 07 2011

thx 🙂

23 07 2011

Thanks a lot,,, IE will burn in hell,,, lost too much time trying to fix inline div tags in IE

23 09 2011
pradeep lakhina

Thanks Sir
It will help me a lot
Easiest way to use min-height in ie6
Thanks A Lot
Pradeep Lakhina

10 07 2012

Unfortunately doesn’t work anymore for ie10.

16 08 2012


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: