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:
Code:
#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:
Code:
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:
HTML Code:
<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>