IE6 overflow:visible bug

By Martin / Tutorials, (X)HTML & CSS / Tuesday August 5th, 2008 / 3 comments

When we redesigned the RoundedDesign site, there were several interesting things I discovered, as I tried to make the site work in the omni-irritating Internet Explorer 6. One of these was the problem IE 6 has with the overflow:visible CSS property.

in IE 6, if you give a fixed-height element the overflow:visible property, instead of keeping the element at the height you gave it IE will expand that element. This is what happened to my menu, for instead of allowing the tabs to overlap the border of the body it pushed the bottom of the header down. Irritating!

However, after searching for a while I found a good (if slightly weird) solution: if you give the element overflow:hidden and its child that overflows position:relative, IE 6 will consider this overflow:visible. This unfortunately doesn't happen in IE 5.5 and under, but since their market share is so low we don't really need to consider them.

Therefore, the fix is simple. Say you had the .overflows element (100px) inside the .fixedheight element (50px) then you just have to use an IE 6-only hack (such as my favourite, the star hack), to assign overflow:hidden; to .fixedheight and position:relative; to .overflows.

/* Normal CSS */
.fixedheight {
    height:50px;
    overflow:visible;
}
.overflows {
    height:100px;
}

/* IE 6 CSS */
* html .fixedheight {
    overflow:hidden;
}
* html .overflows {
    position:relative;
}

Simple but weird.