advanced code snippet search

min-height for IE (and all other browsers)

Published in: CSS 

URL: http://www.cssplay.co.uk/boxes/minheight.html

Since min-height doesn't work in IE, this code makes up for IE's shortcomings. The first part of the code is the correct code that works in Firefox and Safari. The second part of the code is for IE. Internet Explorer will ignore min-height and is just given a height of 8em. The IE bug automatically expands the container to fit the extra text.

Plain TextExpand 
  1. /* for browsers that don't suck */
  2. .container {
  3.   min-height:8em; 
  4.   height:auto !important;
  5. }
  6.  
  7. /* for Internet Explorer */
  8. /*\*/
  9. * html .container {
  10.   height: 8em;
  11. }
  12. /**/

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: jonhenshaw on July 23, 2006

I wanted to make it clear that the the 8em is arbitrary and can be whatever height you would like it to be.

Posted By: Winkyboy on January 14, 2008

You don't really need the "* html" part of the IE definition, I think. This same solution can be found on DustinDiaz's site (http://www.dustindiaz.com/min-height-fast-hack/) without it. Example:

selector { min-height:500px; height:auto !important; height:500px; }

Posted By: rasmus on April 4, 2008

If you don't mind the undercore hack you can do it even shorter:

selector { min-height: 500px; _height: 500px; }

This way you avoid using !important for compliant browsers which may or may not trip you up later down the line (through css or style set through js).

You need to login to post a comment.