[Trasion]

http://trasion.com/?styleid=1

The top part, I want it to all line up together. Right now, the top part of the tabs is one pixel off, even though they're all the same size.

Here's the down-low:

I wrapped the header and those tabs in one div, and had it aligned to the center. The div's class is header_nav, and I made it a set width, but I think it's one pixel too large. But if I shorten it by one, then the tabs get bumped, and one goes on the line below.

Here's my CSS, and header template:

header template:

<center><div class="header_nav"><img src="images/misc/header.png"><br />
<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="putlink" rel="gotsubmenu[selected]">Trasion Homepage</a></li>
<li><a href="putlink" rel="gotsubmenu">Trasion Community</a></li>
<li><a href="putlink" rel="gotsubmenu" style="float:right;">Skateboarding News</a></li>
<li><a href="putlink" rel="gotsubmenu">Skateboarding Galleries</a></li>
<li><a href="putlink" rel="gotsubmenu">Skateboarding Articles</a></li>
<li><a href="putlink" rel="gotsubmenu">Skateboarding Dictionary</a></li>
</ul>
</div>

<div id="mysubmenuarea" class="tabsmenucontentclass">

<!--1st link within submenu container should point to the external submenu contents file-->
<a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>

</div>

<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)

</script></div></center>


<!-- content table -->
$spacer_open

$_phpinclude_output

CSS:

/* ######### CSS for top level tabs ######### */

.tabsmenuclass ul{
overflow: hidden;
width: auto;
margin: 0;
padding: 0;
list-style-type: none;
}

.tabsmenuclass li{
float: left;
}

.tabsmenuclass a{
display: block;
padding: 5px 7px;
background: #373737;
color: #FFFFFF;
margin-right: 1px;
text-decoration: none;
font: bold 13px Tahoma;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 0px;
border-top: 1px solid #000000;
}

.tabsmenuclass a:hover, .tabsmenuclass a.selected{
background: #912F30;
color: white;
font: bold 13px Tahoma;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 0px;
border-top: 1px solid #000000;
}

/* ######### CSS for sub menu container below ######### */

.tabsmenucontentclass{
clear: left;
background: #912F30;
width: 926px;
height: 24px;
padding: 5px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 0px;
color: #FFFFFF;
font: bold 13px Arial;
}

.tabsmenucontentclass ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.tabsmenucontentclass li{
float: left;
margin-right: 1em;
}

.header_nav {
width: 939px;
background-color: #E0E0E0;
}

How can I get this lined up properly?