strange div behaviour

[gwbonline]

Now IE7 supports

Code: Select all

position: fixed

, it does something else that I don't want. I have this:

Div container
div menu
div header

The menu is fixed, so that it doesn't scroll with the rest of the page. The menu has the following css:

Code: Select all

#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;}

The header has this css:

Code: Select all

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

The problem is that Firefox displays the logo in the correct way, but IE7 doesn't. IE7 displays a part of the header below the menu. I discovered that when I remove position:fixed from the menu css, that the logo is positioned correctly. But I want to have position: fixed.