IE problem -- pushes down the nav

**funktifyknow** · Oct 3, 2007 17:51

Unfortunately I am having a problem with everyone's favorite browser, IE. The problem is that the #nav which I have as part of the #header is being pushed down about 10-15 px. I have tried everything short of conditional comments, which I truly don't want to have to use. The CSS in question is this:

Code CSS:

#headerContainer {
	background:url(images/grill.png) right no-repeat;
	position: relative;
	}
 
 
#header {
	height: 200px;
	width: 625px;
	position: relative;
	}
 
#header h1{
	width: 625px;
	position: relative;
	font-size: 0.8em;
	}
 
#header h1 span {
	background: transparent url(images/header.png) no-repeat left top;
	position:absolute;
	left:0;
	top:0;
	display:block;
	height: 200px;
	width: 625px;
	}
 
/*Begin Nav*/	
 
#nav {
	height: 100px;
	position: relative;
	top: 76px;
	width: 625px;
	color:#666;
	float: left;
	}	
 
#navlist
{
margin: 0;
padding: 0;
list-style-type: none;
width: 625px;
}
 
#navlist li, #navlist li a {
margin: 0;
padding: 0;
width: 125px;
height: 100px;
display: inline;
position: relative;
float: left;
}
 
/* mac hide \*/
#navlist li,#navlist li a {	overflow:hidden;}
/* end hide*/
 
li em{
	position:absolute;
	left:0;
	top:0;
	display:inline;
	height: 100px;
	width: 125px;
	}
 
li#about em{
	background: url(images/about1.png) no-repeat 0 0;
	}
 
li#services em{
	background: url(images/services1.png) no-repeat 0 0;
	}	
 
li#menus em{
	background: url(images/menus1.png) no-repeat 0 0;
	}
 
li#order em{
	background: url(images/order1.png) no-repeat 0 0;
	}
 
li#contact em{
	background: url(images/contact1.png) no-repeat 0 0;
	}
 
ul#navlist li a:hover{visibility:visible}
ul#navlist li a:hover em{background-position:0 -100px}

The XHTML is transitional and here it is:

HTML Code:

	<div id="headerContainer">
		<div id="header">
			<h1>For The Grill Of It<span title="For The Grill Of It"></span></h1>
			<div id="nav">
				<div id="navcontainer">
					<ul id="navlist">
						<li id="about"><a href="index.php">About Us<em title="Who We Are"></em></a></li>
						<li id="services"><a href="services/index.php">Services<em title="What We Can Do"></em></a></li>
						<li id="menus"><a href="menu/index.php">Menus<em title="What We Offer"></em></a></li>
						<li id="order"><a href="order/index.php">Ordering<em title="Place Your Order Here"></em></a></li>
						<li id="contact"><a href="contact/index.php">Contact<em title="How You Can Get In Touch"></em></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>