floated horizontal menu has font-size related error

first <li> to left -- last one in list -- is positioned too low

[zollerwagner]

I have been working on creating a horizontal menu with css. I'd like to have the font-weight change to bold on hover. But I'd also like the other items in the menu to stay put (not move to accommodate the wider element when it goes bold).

One of the approaches I've tried is SuzyUK's horizontal menu css float tutorial [webmasterworld.com], which she posted a few months ago. I haven't found a way to make this work so that the menu items respond like blocks (i.e. won't move).

So I took another approach, which almost works. It does work in the minimalist pattern shown below, but on my full page with the full css there's a glitch in IE 6.0.

The first item to the left in the menu is positioned a tad lower than the right ones. (Of course, this is the last in the list because they are floated right.)

The background color indicates that the problem is with the <li>, not the <a>. And if I remove the font-size and related hacks, the problem disappears. If I change the font to small instead of x-small, it works. If I change it to xx-small or back to x-small, it doesn't work. (The font face in use is verdana, but changing that doesn't help.)

I've removed the li declaration, the links declarations, and even everything but this code, but none of that fixed it. It seems to be in the font-size.

Interestingly, the problem is the same whether I use 10px, 80%, smaller, 8pt, or x-small.

Any idea of what might be causing this and how to fix it?

Update: if I place the link in a <p> inside the <li>, the problem goes away. Does that help figure this out?

#navbar{
position: relative;
top: 0;
right: 0;
clear: both;
margin: 0;
padding: 0;
}
#navbar ul{
list-style: none; 
margin: 0;
padding: 0;
}
#navbar ul li {
float: right;
width: 20%;
margin: 0;
padding: 0;
text-align: right;
}
#navbar ul li a:link,
#navbar ul li a:visited,
#navbar ul li a:hover,
#navbar ul li a:active{
white-space: nowrap;
background: #fff;
color: red;
margin: 0;
padding: 0;
text-decoration: none;
text-align: right;
font-weight: normal;
letter-spacing: 1px;
font-size: xx-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: x-small;
}
html>body #navbar ul li a:link,
html>body #navbar ul li a:visited,
html>body #navbar ul li a:hover,
html>body #navbar ul li a:active{
font-size: x-small;
}
#navbar ul li a:hover,
#navbar ul li a:active{
font-weight: bold;
color: blue;
}

[zollerwagner]

A another solution is to add to the CSS for the <li> a font-size: xx-small, perhaps to prepare IE 6 for what's to come.

Am I doing something wrong here, or is IE just that quirky?