[Solved] Styling list-style with a:visited?

Why wouldn't it work?

My thinking was that the css is selecting the "a" or "a:visited", which doesn't have a list-style-type property. Only list items have that property.

The most compelling piece of information, however, was that it's not working in FF on my site. For example, FF is fine with

li {
list-style-image: url(images/Li.jpg);
}

but not

li a{
list-style-image: url(images/Li.jpg);
}


Thanks for the feedback, this issue is really under my skin!

and you would be correct anchor does not have a list-style property but also you couldn't change a list property by li a{} the rules apply to the anchor that is contained within li not to an ancestor element descendent rules read right to left.

Sorry, my brain was addled earlier, I had no idea why I suggested what I did.

list-style-image is only a valid attribute on, funnily enough, the list-item tag.

However, most of us don't suggest using list-style-image as it's too uncontrollable.

Set list-style to none on the li, then use background-image on the anchor instead.

OK. A bit more info:

So the layout is a two column table with a UL in each column. Each UL has several LI's of dynamic content. If I do the background image on an anchor, when the anchor wraps, it looks horrible. I'll see if I can illustrate...

The difference is in the wrap around "certainly". Is there a trick that'll yield me the above, using anchors and bg images?

Not clear on why you want to place the images on anchors rather than li elements.
Edit/ oh, yes I am image according to state of anchor.

Hi

Try giving the image a left nudge and the same negative left margin:

a .nudgemeclassname { background: transparent (bullet.gif) -18px 0 no-repeat; margin-left:18px }

Does that do it?

Just thinking out loud.

Not sure how you're applying the background but try something like padding the li to push the anchor over to the right, set your background on the anchor but negatively position it to the left into the space left by the padding? or use a span to place the background on position it absolute in a relative positioned list?

Edit/ Treva beat me to it :rolleyes:

Only if my completely off the cuff idea worked, otherwise, yours sounds good to me.

So I could be completely wrong here, but it seems that whatever I do to "make room" for the bg image on an anchor will give me the wrapping problem. What would be great is if I could just set the bg image to -15px and have it actually show, but alas, no dice.

I'm considering the easy way out, which in this case would be to use the state of the anchor to change bg on the right of the anchor, rather than the left. Weak.

This forum is fantastically responsive. Cheers to you!

No NO

Try this (you will need an image as well)!

New document

ul {
list-style:none;
margin:0;
padding:0;
}
.addbulletimage{
background: transparent url(Li.jpg) 0 0 no-repeat;
display:block
}
.notbeen {
margin-left:18px;
display:block
}

• hello
  hello

It works for me.

Incontheivable!!!

That was really, truly fantastic. THANKS!

Really. Wow.

Edit: Just did the full-monte implementation on this and it is beautiful. Really wonderfully beautiful.

Glad you got it working

Would be nice if you posted alive url so we can see it.