Shadow bullets

[TwentyFour]

I've typed the following into an external .css file:

#lselect ul li a {
clear: both;
font-size: 100%;
font-weight: bold;
text-decoration: underline;
color: #215E21;
background: url('bullet.jpg') no-repeat left;
cursor: crosshair;
}

#lselect ul li a:link {
clear: both;
font-size: 100%;
font-weight: bold;
text-decoration: underline;
color: #215E21;
background: url('bullet.jpg') no-repeat left;
cursor: crosshair;
}

IE, FF, and NS correctly render the bullets, which are 14px by 13px images I created in Photoshop, but a "shadow bullet" appears on top of the text below the bulletted text, like this:

* Article1 (bulletted text)
by A*uthor1
* Article2 (bulletted text)
by A*uthor2
* Article3 (bulletted text)
by A*uthor3

The second bullet (represented by the asterisk in the middle of "Author") in each sequence would cover up part of the text on lines 2, 4, and 6. Whenever I highlight the covered text, however, the "shadow bullett" disappears. How do I get rid of the obstrusive bullets?

Any help is very much appreciated. Thanks!

[moltar]

Is "author" a link?

[TwentyFour]

Yes, and so is the text under it.

[moltar]

I think that's your problem. By

#lselect ul li a

you are saying "every link in the <li>". So it properly displays it for "* Article1", but on the other link "author" it also adds the bullet.

What you could do is assign a bullet to li element, not to the <a>. Or you could have a separate class "bullet" for each <a> that needs a bullet.