CSS -

Items in Horizontal Menu have a Gap Between Them

The Issue

For some reason the left and right borders of the li items do not touch there is about a 4-5 px gap between them. I have no clue where it is coming from... I've spend a good amount of time monkeying around in Firebug with no luck...

The Markup

 <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>

The 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;
}

Other Info

I am using the 960 grid system CSS reset (which doesn't seem to change my issue w/ or w/o it). I need to get this working in IE 7+ and Firefox - Issue exists in IE8 and FF.