CSS issue on mainlinks

Hello,

We are having an issue on our CSS. Basically when we Zoom out or in with FireFox, the last Contact Us link appears below the first Web Hosting link but is half on the web hosting link. Meaning the contact us link box starts in the middle of the web hosting link box and finishes after the web hosting link box. One half on top of the other. in IE it does not do this, it zooms fine

HTML is:

<table border="0" cellpadding="0" cellspacing="0" id="headerMainLinks">
<tr>
<td><ul id="MainLinks" class="MenuBarHorizontal">
<li><a href="http://www.xxxxxx.com/hosting">Web Hosting</a> </li>
<li><a href="http://www.xxxxxx.com/servers" title="Dedicated Servers">Dedicated Servers</a></li>
<li><a href="http://www.xxxxxx.com/domains">Domain Names</a></li>
<li><a href="http://www.xxxxxx.com/reseller">Reseller</a></li>
<li><a href="http://www.xxxxxx.com/support">Support Center</a></li>
<li><a href="http://www.xxxxxx.com/about">About Us</a></li>
<li><a href="http://www.xxxxxx.com/contact">Contact Us</a></li>
</ul>
</td>
</tr>
</table>

CSSs:

#headerMainLinks {
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: 0px;
height: 40px;
background-image: url(https://www.xxxxxx.com/images/bg_main_links.gif);
background-repeat: repeat-x;
}

ul.MenuBarHorizontal
{
padding: 0;
cursor: default;
width: 850px;
margin-top: 0;
margin-bottom: 0;
margin-right: 0px;
margin-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}

ul.MenuBarHorizontal a
{
cursor: pointer;
background-color: #425D84;
color: #FFFFFF;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border-right-width: 0px;
border-right-style: solid;
border-right-color: #4A75B5;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #4A75B5;
border-bottom-color: #4A75B5;
font-weight: bold;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #4A75B5;
height: 20px;
background-image: url(https://www.xxxxxx.com/images/bg_main_links.gif);
background-repeat: repeat-x;
margin: 0px;
padding-top: 11px;
padding-right: 17px;
padding-bottom: 11px;
padding-left: 18px;
}

ul.MenuBarHorizontal ul li
{
width: 8.2em;
}

ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
text-align: left;
cursor: pointer;
width: auto;
float: left;
white-space: nowrap;
position: relative;
}

Can someone please help me with this?

Sounds like a width issue.

Try increasing the width of the headerMainLinks

Hope this helps

And why are you using tables there for your layout? Get inspired from http://www.hotdesign.com/seybold/ :)

Sounds like a width issue.

Try increasing the width of the headerMainLinks

Hope this helps

I tried that, it is still not working. Still showing under.

Any other recommendations please? :)

Sounds like a width issue.

Try increasing the width of the headerMainLinks

Hope this helps

Anyone can help me with this please?

Time to wear your fashionable watches,collect here (http://www.replicawatchesindia.info)

Sounds like a width issue.

Try increasing the width of the headerMainLinks

Hope this helps

Anything on this please to help me out?

anyone on this please? I really need to make it work and it seems like I tried everything, can't figure it out