The unordered list in the left hand column is displaying as I want it to in FF (with no spacing between the li elements), but in IE6 there is padding/margin between them which I want to get rid of.

Could someone please point me in the right direction.

Thanks

An example can be seen here:http://www.littlegalleryonthefarm.co.../template.html

The HTML for the "leftcol" div is below:
<div class="navigation" id="leftcol" > <ul>
<li class="gallery"><a href="http://www.littlegalleryonthefarm/index.shtml" class="biglink">The Gallery</a></li>
<li class="paint"><a href="http://www.littlegalleryonthefarm/paintings.shtml" class="biglink">Paintings</a></li>
<li class="photo"><a href="http://www.www.littlegalleryonthefarm/photos.shtml" class="biglink">Photographs</a></li>
<li class="news"><a href="http://www.www.littlegalleryonthefarm/news.shtml" class="biglink">News</a></li>
<li class="visit"><a href="http://www.www.littlegalleryonthefarm/visit.shtml" class="biglink">Visit Us</a></li>
</ul>
<p>Mail order available. Credit ard payments accepted. Please call within
opening hours, or <a href="mailto: info@littlegalleryonthegreen.co.uk">email</a> out
of hours for details.</p>
<p class="cow"><img src="images/cowhead2.jpg" alt="" width="106" height="80" /></p>
</div>

And the CSS here:
.navigation ul {
list-style: none;
margin: 0px;
padding: 0px;
}

.navigation li {
margin: 0px;
padding: 0;
}

.navigation li a:link, .navigation li a:visited {
margin: 0px;
padding: 5px;
padding-right: 5px;
text-decoration: none;
font-size: 80%;
font-weight: bold;
color: #333333;
display: block;
}

.navigation li a:hover {
color: #FFFFFF;
background: #00CC66;

}

.biglink {
position: relative ; padding: 0.25em 0.15em 0.35em; z-index: 1;
}