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.
Expand |
Embed | Plain 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
Here's an idea...use tables. they work everywhere. i honestly cant frickin believe people spend the time to figure out the latest css hack. i can't live that way. i want to get things done...until browsers stop supporting tables...tables it will be.
Here's an idea...stop using IE6. it worked everywhere in 2003. i honestly cant fuckin believe people spend the time to figure out how to make IE6 work. i can't live that way. i want to write proper code...until developers stop supporting IE6...IE6 it will be.
hi rasmus,
You can specify _height. But its only for IE6 . But if u r specified *height, it will apply for all versions
A better solution is to use the expression() CSS function in IE.
Example:
This example is a bit old, since IE7+ supports min/max dimensions, you should IE specific Comments.
The expiation is at: Min-Max witdh for IE
If you're going to use JavaScript, keep it out of the CSS.
IE creates problems for java scripts.It is better to use other browsers as Google Chrome,Mozilla to run these scripts without any hurdle.