<ul>s and <li>s in CSS

I hope some­one can help me with this CSS prob­lem / bug:

<ul> and <li> are defined as such:

ul {
margin:.5em 0 1em;
padding:0;
 list-style-type:none;}

ul li {
background:url("/img/bullet.gif") no-repeat 11px .7em;
margin:0;
padding:0 0 2px 18px;
line-height:1.5em; }

But, in Fire­bird for the PC, I get an undes­de­sir­able “second” bullet on a:hover:

An illustration of the Mozilla Bug

No other browser seems to do this, though I haven’t been able to test a mozilla browser on a Mac. Is it a bug? Or is there a hack that would fix it?

1 Response to “<ul>s and <li>s in CSS”


  • Randomly stun­bled on this, thought I’d offer a hand.

    What about set­ting your UL’s list-​style to:

    url(http://ned.suckahs.org/img/bullet.gif) square

    and set no other list-* stuff on UL’s or LI’s. (set­ting that stuff on LI’s is not rec­c­om­mended by W3C anyway) This is much cleaner than the background-​image hack!

Comments are currently closed.