absolute position div with overflow hides on load (IE7+)

Question

I have a header/wrapper layout where both div#header and div#wrapper are absolutely positioned, and on load i calculate the top property of the header and height property of the wrapper to ensure that the content is scrollable in the wrapper (overflow is set to auto). For some reason on IE7+, once the content has loaded and the calculation is done to set the top/height of the divs, it "hides" the wrapper and only the header is displayed... that is until you resize the window, even slightly- resulting in the correct display of the header/wrapper.

Could this be related to the overflow properties? There are no JS errors in the console and it seems like the page on IE doesn't render the overflow correctly.

Any thoughts or suggestions would be appreciated...

Answer 1

OK so I've resolved this issue and figured i'd respond as an answer in case anyone else comes across similar issues.

This is , in fact, an IE8 bug and it pertains to the combination of css properties defined on an element (specifically with overflow, max-width, etc)... Here's a description of the actual bug(s) in IE8 related to the overflow property: http://edskes.net/ie8overflowandexpandingboxbugs.htm

Anyways, I fixed this by removing the overflow property from the CSS and defining it through DOM right before the closing body tag, ensuring that there would be no conflicts with any other css property.