positioning in Internet Explorer

**shamwari** · Oct 4, 2007 08:29

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

**SRD** · Oct 4, 2007 08:42

I know there are discussions going elsewhere here about the suitability of using it but have you tried including either *{margin: 0; padding: 0;} or body{margin: 0; padding: 0;} and then setting your margins/padding individually for each element?

**osgood** · Oct 4, 2007 09:40

Originally Posted by shamwari

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...

I'd ditch the relative/absolute stuff. See if this gets you any closer to waht it is you are trying to achieve:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
#banner {
background-color:#FF9900;
padding-top: 115px;
}
#navigation {
list-style-type: none;
color: #990000;
margin: 0 0 0 312px;
font-size: 115%;
padding: 0;
}
#navigation li {
display: inline;
margin: 0;
padding: 0 10px;
}
#navigation a {
text-decoration: none;
padding: 3px 10px;
}
</style>
</head>

<body>
<div id="banner">
<ul id="navigation">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</body>
</html>

User Tag List

Thread: positioning in Internet Explorer

Thread Tools

Display

Hybrid View

positioning in Internet Explorer

Bookmarks

Bookmarks

Posting Permissions