Free Consultation: +1 (888) 374 0906

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.

 

 
Write A Comment

Post A Comment

 
Submit

Sign up for email updates from our team

View Our Privacy Policy or Terms of Use