Will explain this as best as I can.

I am including a horizontal CSS menu in a website I am making for a friend, when I simply use text everything is fine, as in picture below. This is a cropped screenshot btw.


However when I add the list I get this.

see how the entire cell has moved down?

here is my code.

the CSS is:
Code:
body,
html {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:0;
	padding:0;
	color:#000;
	background-image:url(../images/site_bg.png);
	background-repeat:repeat-x;
}

#container {
	width:950px;
	margin:0 auto;
	text-align:center;
}
/*End Global Styles Here*/

/*Begin Head Styles Here*/
#head {
	height:192px;
	background:#ebebeb;
}

/*Begin Nav Styles Here*/
#nav {
	height:47px;
	background:#ef4036;
}

#nav li {
    display:inline;
}

#nav li a {   
	color:#FFF;
	font-size:16px;
	font-weight:bold;
	text-decoration: none;
}
/*End Nav Styles Here*/
The Menu using list:
Code:
<div id="nav">
	<ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About</a></li>
    	<li><a href="#">Services</a></li>
    	<li><a href="#">Products</a></li>
    	<li><a href="#">Contact Us</a></li>
	</ul>
</div>
And Without:
Code:
<div id="nav">
	Main Navigation Here
</div>
nav.php is loaded into a cell head.php as a php include.

Thank You in advance
Rab