Nav bar image positioning

[phatphish]

Hi. This is my first time posting here. I hope I make sense and provide all relevant info needed. I'm still learning the finer points of CSS and tend to struggle with positioning. I'm never sure when to use float vs relative vs absolute.

Here's my issue:
I have created image rollovers for the main navigation bar on my site. I want the entire menu to be aligned to the right of the div.
When I use plain text navigation the layout works fine: http://www.onderoinvestments.com/lab...-text-nav.html

When I use the image rollovers, it drops the div down on the page a bit: http://www.onderoinvestments.com/lab/index-nav.html

My CSS for the div looks like this:

#nav-top {
	width: 100%;
	height: 45px;
	background:url(img/bg-nav-bar.jpg) center top;
	z-index: 700;
	top: 0px;
}
#container-nav {
	width: 1024px;
	height: 45px;
	line-height: 1.8em;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	z-index: 750;
	text-align: right;
	top: 0px;
	img: text
}

For the list looks like this:

li 
{
  float:right;
  list-style: none;
  padding: 0;
  margin: 0;
}
a#home:link,a#home:visited { 
	color: #ffffff; 
	text-decoration: none; 
	background: url(img/btn/btn-home.png) no-repeat 0 0; 
	display: block; 
	padding: 0px; 
	width: 66px; 
	height: 45px }
a#home:hover,a#home:active 
{
	background-position: 0 -45px;
}
}

The a# parameters are repeated for each button.

And my HTML looks like this:

<div id="nav-top">
<div id="container-nav"><ul>
<li><a id="home" href="index.html"></a></li>
<li><a id="about" href="about.html"></a></li>
<li><a id="business"href="business.html"></a></li>
<li><a id="csr"href="csr.html"></a></li>
<li><a id="stakeholders"href="stakeholders.html"></a></li>
<li><a id="contact"href="contact.html"></a></li>
</ul></div>
</div>

[jeznacki13]

Hi

Your #container-nav ul have default browser margins.

Remove them:

#container-nav ul{margin:0}

And remember to use reset CSS in any project.

-------------
Jacek Jeznach
Web developer

[phatphish]

Hi

Your #container-nav ul have default browser margins.

Remove them:

#container-nav ul{margin:0}

And remember to use reset CSS in any project.

-------------
Jacek Jeznach
Web developer

I new it was something simple like that. Thank you so much!