<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 “sec­ond” bul­let on a:hover:

An illustration of the Mozilla Bug

No oth­er brows­er seems to do this, though I haven’t been able to test a mozil­la brows­er 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


  • Ran­dom­ly 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 oth­er list-* stuff on UL’s or LI’s. (set­ting that stuff on LI’s is not rec­c­om­mend­ed by W3C any­way) This is much clean­er than the back­ground-image hack!

Comments are currently closed.