14 replies [Last post]
geme4472
geme4472's picture
Offline
newbie
Last seen: 13 years 40 weeks ago
Joined: 2007-01-16
Posts: 5
Points: 0

Hello,
I'm trying to style li's list-style property based on a or a:visited. It seems to work in IE, but I think it might be a bug exploit. At any rate, here's the idea.

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

Should this work? Are there any other options I can use?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 16 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Why wouldn't it work?

Why wouldn't it work?

Verschwindende wrote:
  • CSS doesn't make pies

geme4472
geme4472's picture
Offline
newbie
Last seen: 13 years 40 weeks ago
Joined: 2007-01-16
Posts: 5
Points: 0

My thinking was

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!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

and you would be correct

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 16 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Sorry, my brain was addled

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.

Verschwindende wrote:
  • CSS doesn't make pies

geme4472
geme4472's picture
Offline
newbie
Last seen: 13 years 40 weeks ago
Joined: 2007-01-16
Posts: 5
Points: 0

I was afraid that'd be the answer.

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?

AttachmentSize
badbadwrappage.gif 5.88 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not clear on why you want to

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Try giving the image a

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not sure how you're applying

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:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Only if my completely off

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

geme4472
geme4472's picture
Offline
newbie
Last seen: 13 years 40 weeks ago
Joined: 2007-01-16
Posts: 5
Points: 0

I'm not much of a css guy

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!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

No NO Try this (you will

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.

geme4472
geme4472's picture
Offline
newbie
Last seen: 13 years 40 weeks ago
Joined: 2007-01-16
Posts: 5
Points: 0

Tear coming to eye

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 16 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Glad you got it working

Glad you got it working Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Would be nice if you posted

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