- Code: Select all
position: fixed
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.