I'm building a web site with a stacked ul for the main navigation. Everything looks great except in IE. For some reason, IE 6 and 7 is increasing the space between the li items. It works fine in Firefox and Safari. I've messed around with the margins and padding to no avail. I haven't been able to find any bugs or hacks that address this problem, and I don't ever remember having it before. I don't know if I'm overlooking something in my code that's wrong or missing, or if there is a bug I'm not aware of.

Here's the url of the site: http://royalcoffeeandtea.com/index.htm

Heres the CSS code for the navigation:

#navigation {
text-align: left;
margin:-0.8em 0 0 0;

#navigation li {
font:9pt "Trebuchet MS", MetaBook-Roman, "ITC Officina Sans Book", sans-serif;
padding: 0 0 1px 0;

The url for the stylesheets is here (2 different files):