title: border lines between li elements
body: <p>I have strange double border lines appearing between my block li elements in my nav bar. I.e. there is a block li element then a small gap before the other starts, which creates this sort of double line effect. How can I get just single lines? Here is my code:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="header"&gt;
          &lt;h1&gt;
              &lt;!--&lt;a href="#"&gt;&lt;img src="tracylogo7.jpg" alt="Millington and Hope" /&gt;&lt;/a&gt; --&gt;
              &lt;a href="#"&gt;&lt;img src="tracylogo5_header.jpg" alt="Millington and Hope" /&gt;&lt;/a&gt;
          &lt;/h1&gt;
          &lt;h2&gt;
              &lt;!--&lt;a href="#"&gt;&lt;img src="tracylogo5_header.jpg" alt="Millington and Hope" /&gt;&lt;/a&gt; --&gt;
          &lt;/h2&gt;   
      &lt;/div&gt;
      &lt;ul id="nav"&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="stock.html"&gt;Stock&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="events.html"&gt;Events&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="box"&gt;
              &lt;a href="#"&gt;&lt;img src="home4.jpg" alt="Slideshow Image 1" /&gt;&lt;/a&gt;
  
              &lt;a href="#"&gt;&lt;img src="home4.jpg" alt="Slideshow Image 2" /&gt;&lt;/a&gt;
  
              &lt;a href="#"&gt;&lt;img src="home4.jpg" alt="Slideshow Image 3" /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
          &lt;p class="client"&gt;Tel: 07448740&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;E-mail: tjdelane@hotmail.co.uk&lt;/p&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>html,body
  {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  
  body
  {
      background:rgb(171,163,144);
      text-align: center;
      min-width: 600px;
  }
  
  #container
  {
      margin:0 auto;
      background:rgb(171, 163, 144);
      width:80%;
  }   
  
  #nav
  {
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center; 
    /*background:rgb(161,153,134) /* for non-css3 browsers */
     background: -webkit-radial-gradient(circle, rgb(151,143,124),rgb(171, 163, 144));
     background: -moz-radial-gradient(circle, rgb(151,143,124),rgb(171, 163, 144));
  
  }
  
  #nav li
  {
      display:inline;
  }       
  
  #nav a
  {
      display:inline-block;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
      padding:10px 20px 10px 20px;
      text-decoration:none;
      color:white;
  }
  
  #nav a:hover
  {
      background:rgb(171, 163, 144);
  }   
  </code></pre>