Internet Explorer and the Overflow Property
Recently I was working on a website that had a conditional statement which hid the full height of a div on the inside pages.
Something like this:
.menu-top-container{float: left; width: 980px;}
.page .menu-top-container{height: 320px; overflow: hidden;}
A seemingly benign statement that you wouldn't anticipate to give you much trouble height, width and overflow all declared; However this is the internet and we do get to deal with Internet Explorer. It would seem that there is a well documented bug in the browser that ignores the overflow property for static positioned elements (this is the default value). Adding
position: relative to the above property fixes the problem.
.page .menu-top-container{height: 320px; overflow: hidden; position: relative;}
This has existed since IE6. We are now in IE9 and I can consistently reproduce the same bug. I find it interesting that
5 years later we are still dealing with the same issues in IE.
What gives? Who is wrong here? Should elements on the page be
position: static by default as IE seems to think so?
What other oddities could I solve by adding these few characters to my code?
After reading some of the comments in the thread that saved me hours of hunting I've begun to wonder if I shouldn't adopt the same practice that others have in adding
position:relative to my debugging process as step 1.
Hope this helps someone.
Tags: css, height, ie, overflow, position, relative, static