list padding problem

[cannon303]

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:
<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>

and here are the styles:

#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}

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

[beahawk]

try this

#nav ul li a{padding:0; margin:0}

If that does not work put a 1px border round everything - this will help you debug where the gap is.

[cannon303]

No it doesn't work, I'm afraid. Also have used the border to help debug and it is either padding in the <li> tags or padding / margin to the bottom of the <img> tags and as you can see from the css that I have provided it doesn't respond to any of padding:0 or margin:0. I've completely removed the <a href's> and just left the images in the list and the problem persists so it can't be that either. I can't believe such a simple problem can have me stumped like this!

[beahawk]

can you send a link?

[cannon303]

http://puma.eukhost.com/~eastyork/ It's the nav panel on the right and ive put a red background to the <li> tags to show the padding, obviously if I can get rid of the padding issue than you shouldn't see the red and all the elements will move up.

[beahawk]

change this line to this

#nav ul li img{border:none; padding:0; margin:0; float:left; }

[cannon303]

blimey, thanks very much for your help. Don't think I would have got that in a hurry! I almost got out my "I hate CSS" T-shirt then!:)

[kelly23]

Make sure you check it out in Firefox (2.0). You have an issue there with the menu. It's going off to the right (not down), causing a horizontal scroll.

Kelly

[cannon303]

Thanks for the tip. I'll have to download ff2.

[kelly23]

Hi,

Yeah, all websites need to function in Firefox as well as IE.

Kelly

[cannon303]

Yes it works fine in IE7, firefox 3, google chrome, opera and safari. I just assumed as ff is a stable browser that version 2 would support it. Anyway sorted now and thanks for the tip. Of course it looks like a dogs dinner in IE6 though - doh!