border lines between li elements
===

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:

    <body>
    <div id="container">
    	<div id="header">
    		<h1>
    			<!--<a href="#"><img src="tracylogo7.jpg" alt="Millington and Hope" /></a> -->
    			<a href="#"><img src="tracylogo5_header.jpg" alt="Millington and Hope" /></a>
    		</h1>
    		<h2>
    			<!--<a href="#"><img src="tracylogo5_header.jpg" alt="Millington and Hope" /></a> -->
    		</h2>	
    	</div>
    	<ul id="nav">
    		<li><a href="index.html">Home</a></li>
    		<li><a href="stock.html">Stock</a></li>
    		<li><a href="events.html">Events</a></li>
    		<li><a href="contact.html">Contact</a></li>
    	</ul>
    	<div id="box">
            	<a href="#"><img src="home4.jpg" alt="Slideshow Image 1" /></a>
        
            	<a href="#"><img src="home4.jpg" alt="Slideshow Image 2" /></a>
        
            	<a href="#"><img src="home4.jpg" alt="Slideshow Image 3" /></a>
    	</div>
    	<div id="footer">
    		<p class="client">Tel: 07448740&nbsp;&nbsp;&nbsp;&nbsp;E-mail: tjdelane@hotmail.co.uk</p>
    		
    	</div>
    </div>		
    </body>

    <style type="text/css">
    
    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);
    }	

	
