fixed in IE7

[gwbonline]

Hi,

Some strange problem does occur in my design (www.kleibakkers.nl). When you view the website in Firefox, all seems working fine. Also in IE8. But when I open it in IE7, the header (logo) is touching the top with the main menu over it. That's not what I want. I want the main menu first and then the header below it. The main menu is fixed so that it doesn't scroll with the page. When I remove the position:fixed the header is displayed like I want in IE7. But I want to use the fixed property.

This is the css of the header:

#head {
width: 800px;
height: 257px;
margin: 50px auto;
background:url(logowebsite.jpg) no-repeat;
border-bottom:1px solid #E2D9BA;
}

And this is the css of the main menu:

#nav1 {font-family: "Arial"; font-size:0.75em; margin:0; line-height:2em; text-align:center;}
#menu {z-index:100; top:0; position:fixed; width:800px; background:url(bgboven.jpg) repeat-x;}
#menu ul {list-style-type:none; border-bottom: 1px solid #7E7149;}
#menu ul li {display:inline; padding-right:0.2em; padding-left:0.2em;}
#menu ul li a {padding:5px; color:#fff;}
#menu ul li a:hover {color:#ffffff; background-color:#7e7149; text-decoration:none;}

What have I done wrong and how can I make it work for IE7?

[Fang]

#head {
width: 800px;
height: 307px;
margin-bottom:50px;
background:url(logowebsite.jpg) no-repeat 0 50px;
border-bottom:1px solid #E2D9BA;
}

[gwbonline]

Thanks for the quick reply. Can you explain the modifications for me please?

[Fang]

Basically IE is ignoring the top margin, so this moves the background image down 50px and expands the height to accommodate the change.
http://css-discuss.incutio.com/?page=CollapsingMargin

[Natdizzle]

fang you are the man