Navbar horizontal list centering problem

I have a fluid layout with an image based roll-over navbar I want centered in the browser. All of the images total 550 x 30px (5 buttons 90x30, 4 do-nothing tiles 25x30). I put them all in a UL inside a container div 550x30, hoping they would display centered in the browser on a single horizontal plane.

This works in IE6 and Opera8, but drops the last button down directly under the first button. Widening the container to 600px puts the last button where it belongs, but then the navbar is off center by 20 or 30px in all browsers. Widening the container div to 100% also puts all the duc... I mean buttons in a row, but then the navbar is all the way to the left side of the browser.

Here is the relevant CSS:

#topnav {
position: relative;
top: 150px;
background-color: transparent;
margin: auto;
width: 550px;
height: 30px;
text-align: center;
z-index: 300;
}
#navbar_t ul {
margin: 0;
padding: 0;
list-style: none;
}
#navbar_t li {
float: left;
list-style-type: none;
}
#navbar_t li.tile {
background-color: transparent;
width: 25px;
height: 30px;
}
#navbar_t li.home {
background:url(images/nav/btn_home_f2.gif) no-repeat left top;
width: 90px;
height: 30px;
}
#navbar_t li.about {
background:url(images/nav/btn_about_f2.gif) no-repeat left top;
width: 90px;
height: 30px;
}
#navbar_t li.projects {
background:url(images/nav/btn_projects_f2.gif) no-repeat left top;
width: 90px;
height: 30px;
}
#navbar_t li.guides {
background:url(images/nav/btn_guides_f2.gif) no-repeat left top;
width: 90px;
height: 30px;
}
#navbar_t li.resources {
background:url(images/nav/btn_resources_f2.gif) no-repeat left top;
width: 90px;
height: 30px;
}
#navbar_t a {
display: block;
width: 90px;
height: 30px;
}
#navbar_t li.home a {
background:url(images/nav/btn_home.gif) no-repeat left top;
width: 90px;
height: 30px;
}
#navbar_t li.about a {
background: url(images/nav/btn_about.gif) no-repeat left top;
width: 90px;
height: 30px;
}
#navbar_t li.projects a {
background:url(images/nav/btn_projects.gif) no-repeat left top;
width: 90px;
height: 30px;
}
#navbar_t li.guides a {
background:url(images/nav/btn_guides.gif) no-repeat left top;
width: 90px;
height: 30px;
}
#navbar_t li.resources a {
background:url(images/nav/btn_resources.gif) no-repeat left top;
width: 90px;
height: 30px;
}
ul#navbar_t a:hover {
background: transparent;
}
ul#navbar_t a:focus {
background: transparent;
}

And the relevant XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>navbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Hand coded with NoteTab Pro" />
<style type="text/css" media="screen">
@import url("./the.css");
</style>
</head>
<body>
<div id="page">
<div id="top">
<div id="logo"><img src="images/nav/logo.jpg" alt="" />
</div>
<div id="topnav">
<ul id="navbar_t">
<li class="home"><a href="#"></a></li>
<li class="tile"><img src="images/nav/navtile.gif" alt="" /></li>
<li class="about"><a href="#"></a></li>
<li class="tile"><img src="images/nav/navtile.gif" alt="" /></li>
<li class="projects"><a href="#"></a></li>
<li class="tile"><img src="images/nav/navtile.gif" alt="" /></li>
<li class="guides"><a href="#"></a></li>
<li class="tile"><img src="images/nav/navtile.gif" alt="" /></li>
<li class="resources"><a href="#"></a></li>
</ul>
</div>
</div> 



</div> 
</body>
</html>

Can you see something in here that would cause the Resources button to go to a new line below the Home button only in FireFox?

Thank you for any assistance.

Grump