strange (lineheight) gaps in list-styled horizontal menu

Hi all,

I've got some strange behavior happening in Firefox and Safari (Khtml
and Gecko) that displays *almost* fine in IE6.0 (still trying to get
pixels to line up, anal anal anal...)

To speed things up, and to avoid any problems with looking through the
css file, I'll say first that I based the navigation menu on the
"Suckerfish Dropdown menu" online demo over at htmldog.
(http://www.htmldog.com/articles/suckerfish/dropdowns/). In terms of
markup structure and such I didn't vary too much from the guide (which
is great, btw...), but somewhere things stopped working, so I'm
pointing fingers at css and how the cascade actually affects descendant
objects...


html is here:
http://www.ale.com.tw/ale_online/members/test/index.php
css is here:
http://www.ale.com.tw/include/ale_test.css
(sorry, the content is in Chinese, but even if you can't display the
characters, you should be able to see the odd behavior...).

Basically, in the navigation menu at the top (if fonts are at normal
size (i.e. [Ctrl-0]) there are gaps at every 2 or 3 <li> tags... This
goes away completely if the font is larger or smaller... and there's
not a trace of this behavior in IE6. The markup is very
straightforward in its format:

<ul id="nav">
<li><a href="foo.bar">foobar</a>
<ul>
<li><a href="who.bar">whobar</a>
</li>
</ul>
</li>
</ul>

but feel free to poke and prod there, as well... it is definitely
*something* I'm missing/don't see/don't know...

I'm guessing it has to do with borders adding a pixel or two to each
side, followed by a fixed width of 130px for parent elements, but I
can't wrap my head around *why* it's doing this, and why it's working
better in IE6.

Any thoughts would be appreciated!

It's a test page, so it may change here and there - but I don't think
I'll figure it out anytime soon.

thanks in advance for any nudges in the right direction.

Travis Hulsey