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.
Comments
Subscribe to comments
You need to login to post a comment.
I wanted to make it clear that the the 8em is arbitrary and can be whatever height you would like it to be.
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; }
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).
Is this specifically IE6 and lower? From my (admittedly brief) look through google it seems IE7 supports the property.
This is specifically for IE6. It does not fully support IE5.5 and below. And yes, IE7 does support min-height properly.
Only works for me (in IE7) if I put an !important on the 2nd section:
/* for browsers that don't suck */ .container { min-height:8em; height:auto !important; }
/* for Internet Explorer / /*/ * html .container { height: 8em !important; } /**/
this could also be shortend like this:
container {
height:auto!important; mih-height:300px; height:300px: /for IE6/ }
yeah, those could go in the same declaration, as IE6 doesn't support !important or min-height so no hacks are required to get it to ignore those attributes. IE7 (to the best of my experience) supports !important and min-height so you're safe to use it there.
Joel Larios
http://htmlcsstutorials.blogspot.com/2009/06/how-to-have-div-min-height.html
This tutorial will tell you how to give min-height, which will work in all the browsers including ie6
http://htmlcsstutorials.blogspot.com/2009/06/how-to-have-div-min-height.html
This tutorial will tell you how to give min-height, which will work in all the browsers including ie6