CSS - & lt; li & gt; Les éléments du menu horizontal présentent un écart entre eux

La Question

Pour une raison quelconque, les bords droit et gauche de la li éléments ne touchez pas il y a environ 4-5 px d'écart entre eux. Je n'ai aucune idée d'où il vient... j'ai passé une bonne quantité de temps monkeying autour de dans Firebug avec pas de chance...

Le Balisage

 <div id="menucontainer">      
      <ul id="menu">              
           <li><a href="google.com"></a></li>
           <li><a href="google.com"></a></li>
           <li><a href="google.com"></a></li>
      </ul>
 </div>

Le CSS

#menucontainer
{
    display: block;
    float: left;
    width: 100%;
}

ul#menu
{
    display: block;
    padding: 5px 0px 5px 15px;
}

ul#menu li
{
    display: inline;
    padding: 3px;
    border-right: 1px solid #D8D6FF;
    border-left: 1px solid #D8D6FF;
    margin: 0 !important;
}

ul#menu li a
{
    padding: 3px;
    margin:0;
}

D'Autres Info

Je suis en utilisant le 960 système de grille CSS reset (qui ne semble pas changer ma question/w ou w/o). J'ai besoin d'obtenir ce travail dans IE 7+ et Firefox - Problème existe dans IE8 et FF.

source d'informationauteur Jason