IE6 Bullets on lists

Question

My link is here:

Example Page

I'm using list-style-image: to give my horizontal lists ( very top and bottom ) seperators. I have a class of .first to remove the image from the first li in each list.

Lo and behold in IE6, it doesn't work. What happens is that the bullet images are not being displayed, and also the bottom few pixels of the text appears to be cropped.

Screenshot

I've fixed a few 'haslayout' bugs with this page, but I have a feeling its something to do with my rule hierarchy, although no amount of hacking about seems to work for me.

Can someone shed some light on this perhaps? Thanks.

Also, my colour change works on hover, but not the underline, in the same selector?

EDIT OK, I have used the background image technique that yoavf suggests, which seems to do the trick, but the cropping issue still remains. Looks like a separate issue then...

heres my revised CSS

#site-navigation li {
    background-image:url(../img/site-nav-seperator.gif);
    background-position:0 4px;
    background-repeat:no-repeat;
    float:left;
    padding-left:15px;
}
#site-navigation li.first {
    background-image:none;

}

further edit:

Managed to fix the cropping too, by giving the a tag some line-height.

#site-navigation a {
    color:#666666;
    display: block;
    text-decoration:none;
    margin-right: 1em;
    line-height: 1.1em;
}

this bit feels like a bodge though :)

Answer 1

I know this isn't really a solution, but I would recommend using background-image instead of list-style image. You'll achive the same effect, and it will work in all browsers.

Answer 2

Here is a great article on styling lists: http://www.alistapart.com/articles/taminglists/

It has lots of examples/screenshots of how different browsers render lists. It should answer all your questions and then some. :)

Answer 3

Looks like a problem with margins and paddings of your objects inside site-navigation.

If you showed your CSS for those elements, we could check it faster :)