Min Height in IE 6
Leave a response | Trackback |
Tags: css, CSS Tips, IE
Would you look at this, while everyone has finally decided that they will be dropping support for IE 6, that’s when I decided to create a tutorial for implementing min-height for the browser. Anyway, onto the post.
We all know that the min-height property doesn’t work in IE 6. Instead, the height property acts as both the element’s height and min-height. Its role will ultimately rely on the value of your overflow property.
If the overflow property is set to hidden then the height of the element is its max-height. If set on visible, however, then it will be its min-height.
Overflow: Visible
The element will take up the specified height and when the content of the element exceeds the height then the element will just expand vertically (or horizontally, if it needs to). You can define whether the it will expand vertically of horizontally by specifying the value for overflow-y (vertically) or overflow-x (horizontally) (your CSS document won’t validate for CSS 2.1 though, but it’s valid once tested against CSS 3).
So your CSS (for IE 6) will look something like this:
div.parent-element { height:300px; overflow-y:visible; overflow-x:hidden; }
The Complexities that hasLayout Brings
There are some instances when you have to define the height and overflow properties of an element (usually applicable to lists) to meet the demands of the hasLayout curse in IE. In these instances, you will have to add a bogus height and overflow:hidden thinking that it will not bring harm to your design.
That is until you wanted to add a min-height to the parent div.
If your bogus height is set to 1%, you element will collapse. Setting the height to auto will render your layout worse than before because that means that your element “will not have a layout” (IE, your hasLayout is nonexistent in IE).
Setting the height to 100%, however, will then expand your element to the height of its parent div (or element).
You can solve this dilemma by changing your overflow value from hidden to visible and setting the height of your element (usually, list items) to 1% just to retain the bogus height.
