Unwanted gap between images in list (IE6, Firefox)

There are unwanted gaps in a list of nav images.

[jzahlaway]

I'm trying to create an image-based navigation system styled using CSS. (FYI: The designer & client want to use images instead of plain text.) Each image is a list item within an unordered list. (More FYI: the nav images aren't linked to anything at this time.)

I currently have tried to style it so that there is no space whatsover between the top and bottom of each image--in other words, I want the images butted right up against each other.

In Safari, I'm getting what I want. In Firefox, there is a small gap between each. In Win IE6 there is a much larger gap between each.

Anyone know what's happening and, more importantly, how to make it stop? Any help would be greatly appreciated.

[edited by: jatar_k at 5:30 pm (utc) on Mar. 6, 2006]
[edit reason] no urls thanks [/edit]

[firstreflex]

Did you try this?

#nav ul li img {
display:block;
}

[jzahlaway]

I did now ... but no luck.

This is ridiculous. I hate IE6 10x more than I did yesterday ... which was plenty to begin with.

[firstreflex]

how about this for the ie bug

#nav ul li {
display:inline;
}

[jzahlaway]

While keeping

#nav ul li im {
display: block;
}

intact, as well?

[Fotiman]

I had a similar problem at one point but I wasn't even using images. I had problems where my <ul> background was showing through between <li>'s. I tried removing margins and padding but couldn't get rid of it. It ended up being line-height. If I had it set to anything higher than 1.2em the background would show through... don't know why that was.

Anyway, I would suggest setting your margin and padding on the list items and images to 0 first.

li, li img
{
margin: 0;
padding: 0;
}

If that doesn't work, try adding line-height: 1em;

[jzahlaway]

In case anyone's interested, this was the solution:

#nav {
font-size: 0;
}

What a maddening browser. I hope it dies someday.