I am making a menu using a list and IE keeps adding extra padding. I have tried searching the forum, but nothing I found seems to work...even the add a space between <a> </a>.

<ul id="menu">
<li class="mainmenu"><a href="#">Home</a></li>
<li class="mainmenu"><a href="#">About</a></li>
<li class="mainmenu"><a href="#">Shared Hosting</a></li>
<li class="mainmenu"><a href="#">Reseller Hosting</a></li>
<li class="mainmenu"><a href="#">Contact</a></li>
</ul>

CSS:

#menu {
margin: 0px;
padding: 0px;
width: 169px;
height: 19px;
list-style-type: none;
}
#menu li {
margin: 0px;
padding: 0px;
width: 169px;
height: 19px;
list-style-type: none;
}
.mainmenu A {
width: 149px;
height: 18px;
background-image: url(images/menu.gif);
font-family: Verdana;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
padding: 3px 0px 0px 20px;
overflow: hidden;
display: block;
}
.mainmenu A:hover {
width: 149px;
height: 18px;
background-image: url(images/menu_over.gif);
font-family: Verdana;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
padding: 3px 0px 0px 20px;
overflow: hidden;
display: block;
}