CSS Min-Height Hack in Internet Explorer

Posted on 12/15/2009 at 10:18 am by Kevin Wentworth
Viewed 13,979 times | 0 comments

Another day of web developing with CSS and another day of needing a hack for IE6 and IE7.  This isn't really a hack so much as it's a method of ordering statements in your CSS declaration that yields a working min-height declaration in Internet Explorer.  Well, I guess it's a hack (but I hate using them).

CSS min-height will be used in browsers that support it

In web browsers that support the min-height property, it will be used.  In browsers that don't support it, height will be used.  For browsers that support !important, the height will be set to auto (with a min-height property).  For browsers that don't support !important, ah-hem IE6, the height will be set to a fixed height.

CSS min-height magic

The following code is what I used in my CSS style sheet to make my container div at least 879px tall. (I found it here)

  1. #container {
  2.     * a little magic to make min-height work in IE */
  3.     min-height: 879px;
  4.     height: auto !important;
  5.     height: 879px;
  6. }

IE6 is not !important

Two things work in our favor with how IE6 works- 1) it doesn't support !important and 2) the height, even though set to a fixed height, will still expand to the needed height of the container div.

-Kevin Wentworth

Bookmark and Share

Tags for CSS Min-Height Hack in Internet Explorer

Css | Example | Hack | Ie | Internet Explorer | Web Design

Comments for this Posting

No comments. Be the first to post a reply.

Sorry, comments are closed for this posting.

Please Email Kevin if you have any questions. Thanks!

Meet Site Avenger - Hosted Content Management System

Powered By: Site Avenger | Site Production: Saco Design