Menu control has spacing problem

[Wowotoe]

I'm trying to implement the Menu control on VS2005. The menu looks
great in Vertical mode. However, there are some weird spacing issues
when in Horizontal mode. Seems like spaces are inserted between each
menu item and separator. I specified all the horizontal-padding I can
find to be "0px" and in CSS margin: 0px and padding: 0px. But the
spacings are still there.

I did a search on Google and there are few other people having the
same issue but none of them have good reply that solve this mystery.

Any help will be much appreciated. Thanks.

Below is a sample of my codes.


<style type="text/css">
<!--
..test-NavLeft {
background-image: url(navimg_left.gif);
height: 30px;
width: 4px;
padding: 0px;
margin: 0px;
background-repeat: repeat-x;
}
..test-NavRootItem {
background-image: url(navimg_bg.gif);
height: 30px;
background-repeat: repeat-x;
padding-left: 10px;
padding-right: 10px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
}
..test-NavRight {
background-image: url(navimg_right.gif);
height: 30px;
width: 4px;
padding: 0px;
margin: 0px;
}
-->
</style>


<asp:Menu ID="mnu_Sample1" runat="server" Orientation="Horizontal"
StaticEnableDefaultPopOutImage="false" StaticMenuItemStyle-
ItemSpacing="0" StaticMenuItemStyle-HorizontalPadding="0"
StaticMenuStyle-HorizontalPadding="0">
<StaticItemTemplate>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="test-NavRootItem"><%# Eval("Text") %></td>
</tr>
</table>
</StaticItemTemplate>

<DynamicItemTemplate>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="test-NavLeft">
</td>
<td class="test-NavRootItem">
<%# Eval("Text") %>
</td>
<td class="test-NavRight">
</td>
</tr>
</table>
</DynamicItemTemplate>



<Items>
<asp:MenuItem Text="Monkey" ToolTip="monkey likes to play
baseball" SeparatorImageUrl="navimg_divider.gif"></asp:MenuItem>
<asp:MenuItem Text="Bananas" ToolTip="monkey likes to play
baseball">
<asp:MenuItem Text="Sub-Menu 1" ToolTip="monkey likes
to play baseball" />
<asp:MenuItem Text="Sub-Menu 2" ToolTip="monkey likes
to play baseball" />
<asp:MenuItem Text="Sub-Menu 3" ToolTip="monkey likes
to play baseball">
<asp:MenuItem Text="Sub-Sub-Menu 1"
ToolTip="monkey likes to play baseball" />
<asp:MenuItem Text="Sub-Sub-Menu 2"
ToolTip="monkey likes to play baseball" />
</asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>