Margin issues in IE 5 & 5.5 ... looks good in IE 6

http://www.wrea.com/products/default_new.asp

OK in all but IE 5 and 5.5 this is acceptable. I know IE 5 has some margin and padding issues and that explains that, but basically here is the deal:

Main menu bar (Home, Products...) should space out to have the last item finish about 40 pixels left of where "ergonomics" begins in the logo. In gecko's and IE6 this is perfect, in IE 5 there is no spacing between the words, and in 5.5 it is spread out beyond that point. How can I code this to work?

Code:

<div id="menu">
<a href="/">Home</a>
<a href="/products/" onmouseover="MM_showHideLayers('MenuProd','','show')" onmouseout="MM_showHideLayers('MenuProd','','hide')">Products</a>
<a href="/ergonomics/" onmouseover="MM_showHideLayers('MenuErgo','','show')" onmouseout="MM_showHideLayers('MenuErgo','','hide')">Ergonomics</a>
<a href="/literature/" onmouseover="MM_showHideLayers('MenuLit','','show')" onmouseout="MM_showHideLayers('MenuLit','','hide')">Literature</a>
<a href="/company/" onmouseover="MM_showHideLayers('MenuCompany','','show')" onmouseout="MM_showHideLayers('MenuCompany','','hide')">Company</a>
<a href="/support/" onmouseover="MM_showHideLayers('MenuSupport','','show')" onmouseout="MM_showHideLayers('MenuSupport','','hide')">Support</a>
</div>

CSS:

div#menu {
margin: 3px 0px 0px 2px;
}

div#menu a {
color: #000;
font-weight: 900;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
margin: 0px 1px 0px 6px;
background: #FFF;
}