list padding problem

Hi I’m trying to make an image based navigation list and I can’t seem to get rid of 3px padding to the bottom of each list item. It’s the same for every browser I’ve tested so it should be something fairly simple that I’m doing wrong. Here is the html:

[code=html]<div id=”nav”>
<ul>
<li><a href=”index.php”><img src=”graphics/nav/home.jpg” /></a></li>
<li><a href=”pitched_roofing.php”><img src=”graphics/nav/pitched_roofing.jpg” /></a></li>
<li><a href=”flat_roofing.php”><img src=”graphics/nav/flat_roofing.jpg” /></a></li>
<li><a href=”lead_roofing.php”><img src=”graphics/nav/lead_roofing.jpg” /></a></li>
<li><a href=”solar_roofing.php”><img src=”graphics/nav/solar_roofing.jpg” /></a></li>
<li><a href=”location.php”><img src=”graphics/nav/location.jpg” /></a></li>
<li><a href=”contact.php”><img src=”graphics/nav/contact.jpg” /></a></li>
</ul>
</div>[/code]

and here are the styles:

[code=html]#nav{ background:url(graphics/nav_bkg.jpg); width:255px; padding:0; margin:0}
#nav ul{ margin:0; padding:0}
#nav ul li {padding:0; margin:0}
#nav ul li img{border:none; padding:0; margin:0}[/code]

I can’t for the life of me work it out, as you can see i’ve practically put padding:0 and margin:0 everywhere but to no avail. Any ideas??? It’s doing my head in.

Thanks

Also in #CSS _↴