Question

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:

<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: [phone]&nbsp;&nbsp;&nbsp;&nbsp;E-mail: [e-mail]</p>

    </div>
</div>

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

Answer 1

Those whitespaces are caused by separating <li> tags in new lines. Add comments.