Expressing IT

Post IE 6 , MSIE has been kind enough to us UI developers by adding a few more CSS properties standard to most other standard browsers. One such usefull property in “min-height”.  Pretty straight forward property that needs no long winded explanation. When a min-height for a division is set, it always retains that set height when the content it houses occupies less than it can hold and importantly ( unlike the plain vanilla “height” property ) scales or in CSS words, it behaves like a division whose “height” is set to “auto”…

For some of us poor developers, who still are required to code CSS that must also work in IE6, un-availability of the “min-height” , could prove a show stopper sometime… Donot despair.  

Fortunately, we have enough quirks in IE , that we would use to out advantage and hack our way through to reach our goal…i.e. make a DIVISION division as though its min-height in IE6

Solution 1 : Using the Underscore Hack [ ...Read more]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML : - 
<div class="box1">Some dynamic content with variable height ...</div>

---

 Solution 2: Using the CSS Attribute Selector Hack

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML:-
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>
 

 The CSS Attribute Selector Hack takes advantage of the fact the browsers earlier tha IE6 ignored an atribute-selector. Note the requirement of another container division with class=”someclass” . Just the presense of the class attribute for this division, overrides the height back to auto for Opera, Mozilla and MSIE7 and later. IE6, which doesn’t support atribute selectors, ignores it.

View Demo of the min-height hack for IE6