title: CSS - <li> Items in Horizontal Menu have a Gap Between Them
body: <h2>The Issue</h2>
  
  <p><strong>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.</strong>  I have no clue where it is coming from... I've spend a good amount of time monkeying around in Firebug with no luck...</p>
  
  <h2>The Markup</h2>
  
  <pre><code> &lt;div id="menucontainer"&gt;      
        &lt;ul id="menu"&gt;              
             &lt;li&gt;&lt;a href="google.com"&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="google.com"&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="google.com"&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <h2>The CSS</h2>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <h2>Other Info</h2>
  
  <p>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.</p>