“min-height” hack for IE (Internet Explorer)

.box2 {
   background:yellow;
   min-height:100px;
   height:100px;
   }
div[class] .box2 {
   height:auto;
   }
<div class="someclass">
   <div class="box2">...</div>
</div>
This solution makes the box at least 100px high in Win/MSIE, Opera and any Gecko-based browser (Mozilla, Firefox, Camino etc.). Mac/MSIE has a bug — the parent box is stretched if it’s height is set to auto. The simple solution is to cover the box with another one. The outer box will define border, background etc., the inner one will use the min-height hack. (But Mac/MSIE is almost dead…) Some browsers stay out of this hack — especially Konqueror/Safari. Hopefully the min-height will be supported in Safari’s next release… (updated: min-height is now supported in Safari).

http://www.wellstyled.com/css-minheight-hack.html

Share your thoughts & feedback

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: