Min-height in Internet Explorer

We all know IE sucks at web standards and CSS interpretation. All the damn browsers out there read CSS ok, but IE noooo. Microsoft has to be different.

They even state in the MSDN Min-height Attribute :

This feature requires Microsoft Internet Explorer 6 or later.

Well no. IE doesn’t support this attribute.

Here is a quick CSS fix to get the min-height property to work in Internet Explorer :

.box {
width: 120px;
border:1px solid #E8D495;
background-color: #FFF2BF;
padding:5px;
margin:5px;
height:auto;
min-height:180px;
}

* html .box {
height: 180px;
}

Don’t worry about the fixed height for Internet Explorer, because Microsoft is good at bugs. IE will auto set the height of the used element, to fit the content, even if we gave a fixed one.

Live preview with images, because of the wordpress post limitation, using min-height 180px, in Firefox and Internet Explorer (in that order):

Other great places to learn more about the min-height, or hacks to make it cross-browser:

• MezzoBlue - min-height: fixed;
• Greywyvern - CSS min-height hack
• W3Schools - CSS min-height Property
• Wellstyled - The “min-height” Hack
• Dustindiaz - Min-Height Fast Hack
• CSS Play - Min-height for Internet Explorer

If you found this post useful please (new windows)

Tags: none