I currently have a problem with IE6 and IE7 on a site I'm building, which is to do with where the navigation items appear within the header/banner. Using Firefox on Windows Vista and Mac, and Safari on a Mac, the navigation appears exactly where I want it, but using Internet Explorer (either version) the navigation appears much higher. It's difficult to find a compromise position for the navigation items which looks OK in IE and also in the other browsers. Although I'm a bit of a newcomer to CSS, I've used relative positioning for the banner so I can put the navigation exactly where I want to inside it with absolute positioning. Could this be a quirk with CSS positioning in Internet Explorer, or maybe something much simpler? If anyone could help I'd really appreciate it - I'm attaching the CSS I've used...



#banner {
position: relative;
}

#navigation ul {
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
color: #990000;
position: absolute;
top: 115px;
left: 312px;
font-size: 115%;
}

#navigation li {
display: inline;
padding-right: 10px;
padding-left: 10px;
font-family: Arial, Helvetica, sans-serif;
}