Nedward.org // <ul>s and <li>s in CSS

<ul>s and <li>s in CSS

25 September, 2003 at 07:55 PM
categories: weblogs

I hope someone can help me with this CSS problem / 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 Firebird for the PC, I get an undesdesirable "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?

Comments

From Only the Most Respected Minds

Jeremy
wrote on Oct 21, 2003 11:37 PM

Randomly stunbled on this, thought I’d offer a hand.

What about setting 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. (setting that stuff on LI’s is not reccommended by W3C anyway) This is much cleaner than the background-image hack!

<ul>s and <li>s in CSS

Comments

From Only the Most Respected Minds

Archives

Where Old Posts Go to Die