List is moving cell down

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.
http://aromaku.com/images/working_black.jpg

However when I add the list I get this.
http://aromaku.com/images/broken.jpg
see how the entire cell has moved down?

here is my code.

the CSS is:

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:

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

<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

That's coming from the default top margin that the browser is applying to the ul element. Fix it via:

#nav ul{margin:0}

It's good practice to set all the margins and padding on all elements to 0, then they'll be consistent cross-browser, and you can set them to what you want - like this, at the top of your css:

*{margin:0;padding:0}

If you use Firebug (http://getFirebug.com) for Firefox it's very easy to see this sort of thing.