Newbie here, some really unexpected results with IE7. I don't think I'm doing anything complex (perhaps something wrong), but IE6/IE7 aren't playing nice.

1 answer

Emily G 620
1
point

IE6 will expand a div to fit its contents. Your #header_top has a width of 843px and a height of 174px. Your #nav_text has a width of 843px plus a left margin of 82px. It is positioned with a top of 140px and has a height of 100px; This gives your navigation a total width of 925px and a height of 240px. The unitpngfix.js is expanding the background image to fit those dimensions. A better way to position the navigation is

#nav_text{
    text-align:center;
    padding:0 23px 0 0;
    width:600px;
    float:right;
    margin-top:147px;
}
* html #nav_text {margin-top:0;}

The unitpngfix.js is pushing the navigation down for some reason. The * html will target IE6 to remove the margin top.


edit after comment

For IE7, remove the height:174px from #wrapper_header

#top_header has a height of 174px plus a top margin of 100px. IE7 is not counting the top margin of #top_header when it calculates its position when the #wrapper_header height is explicitly specified.

Answered about 7 years ago by Emily G
  • Awesome! Great fix for IE6! This was my first time using this .js for fixing transparent .png in IE6. Any hints on the IE7 problem? It's as if the header isn't treated as a block element anymore, and IE7 doesn't reserve it's space. Dave Christensen about 7 years ago
  • see my edit for the fix for ie7 Emily G about 7 years ago