Elements disappearing on IE7 window resize

Question

I am coding this web page. http://www.nomizine.com/misc/tbs/default.html

It renders well everywhere except for IE7. When I resize the browser window, top navigation, the compass on the left and subscribe block on the right disappears.

Any idea how to fix it? BTW, I have already tried HasLayout tricks like zoom:1, clear:both etc but nothing seems to work.

Answer 1

I believe the issue is the fact that the compass is absolute positioned but the container (the td in this case) is not absolute or relative positioned..

since the absolute positioned elements are positioned in relation to the nearest relative or absolute positioned parent, it could be that IE7 messes up when trying to reclculate (due to the resize) where to put this element..

i would suggest you wrap the #compass div with a div that has position:relative

[EDIT]

ok the culprit is #header_bg rule in the css file.. just remove the position:relative and all will be back to normal :)

#header_bg{
   background: url(../images/header_bg.png) no-repeat center top;
   /*position:relative;*/
 }

Answer 2

This is what worked for me.

header_bg{

        background: url(../images/header_bg.png) no-repeat center top;
        height:100%;
        margin:0 auto;
        position:relative;
        text-align:center;
        width:100%;         
}