CSS Issues on TopLinks

Hello,

We are having an issue on our CSS. Basically when we Zoom out or in with IE, all the links appear one on top of each other and being a bit off but completely horrible. in Firefox it does not do this, it zooms fine

HTML is:

<table border="0" cellpadding="0" cellspacing="0" id="headerTopLinks">
<tr>
<td><img src="https://www.xxxxxx.com/images/home.gif" /><a href="http://www.xxxxxx.com">Home</a><span class="TopLinksBars">|</span><img src="https://www.xxxxxx.com/images/question.gif" /><a href="http://www.xxxxxx.com/about">About Us</a><span class="TopLinksBars">|</span><img src="https://www.xxxxxx.com/images/one.gif" /><a href="http://www.xxxxxx.com/advantage">Why Choose </a><span class="TopLinksBars">|</span><img src="https://www.xxxxxx.com/images/news.gif" /><a href="http://www.xxxxxx.com/blog">News</a><span class="TopLinksBars">|</span><img src="https://www.xxxxxx.com/images/person.gif" width="9" height="10" /><a href="http://forums.xxxxxx.com/">Forums</a><span class="TopLinksBars">|</span><img src="https://www.xxxxxx.com/images/dollar.gif" width="9" height="10" /><a href="http://www.xxxxxx.com/affiliates">Affiliates</a><span class="TopLinksBars">|</span><img src="https://www.xxxxxx.com/images/lock.gif" width="9" height="10" /><a href="http://www.xxxxxx.com/login">Customer Login</a></td>
</tr>
</table>

CSSs:

#headerTopLinks {
width: 625px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: auto;
height: 30px;
background-color: #4A75B5;
color: #425D84;
border-right-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #3e5c80;
border-bottom-color: #3e5c80;
border-left-color: #3e5c80;
padding: 0px;
text-align: center;
}

#headerTopLinks a {
text-decoration: none;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
display: inline;
font-size: 11px;
margin-right: 5px;
margin-left: 5px;
}

#headerTopLinks td {
vertical-align: baseline;

}

.TopLinksBars {
font-size: 18px;
margin-right: 5px;
}

Can someone please help us with this?

Thank You

Try giving width of the headerTopLinksin to percentage rather than giving fixed width