Contextual popup image

[jana]

All links in my journal are styled with 'border-bottom: 1px solid #someColor;' which also affects the contextual popup image. I don't want a border in this particular case, but I cannot seem to get rid of it.

I've tried .ContextualPopup{border: none !important;} and .ContextualPopup a{border: none !important;}, but it doesn't have any effect. Nor does .ljuser a img{border: none !important;}

What am I overlooking?


EDIT: Picture of what I mean (the red dots showing which image(s) I'm talking about)




EDIT 2: Like someone pointed out to me, it's not the contextual popup but the user name icon (or user link).

Comments

[stormy]

Did you manage to figure it out? I'm not seeing a border on your contextual hover popup icons.

[jana]

No, I haven't. Maybe we're talking about different things? I have added an example picture to my entry, hopefully it explains what I mean...

[stormy]

Ah! That's the user link, not generally referred to as the contextual popup, but the link itself that shows the popup. That's definitely more clear - and more difficult in general to pin down. The bottom border you see on those links isn't actually on the image. It's on the entire link, which includes the image. Think of the entire linking item like a box. There's a border at the bottom. Inside the box there's an image and the text link. You'd have to take the border off the entire thing in that specific case, is that what you want?

As far as the user links in your actual entry, perhaps something could be done about that in general. I don't have your style up, and my firefox is being wonky to look at it, but maybe something similar to the following might do the trick and override your link style:

img[src*="feed.png"], img[src*="community.png"], img[src*="user.png"] {border-bottom: none; text-decoration: none;}

You can always try border-bottom: 0px too if none doesn't work. Or just a general img a tag with a border: none. That would take the border off all images unless otherwise specified.

[jana]

I think I've figured it out. .ljuser consists of two kinds of links - a (=mini icon) and b (=user name) - so you need to style each individually. So it's like you said first, the link wasn't actually on the image. But the entire linking item doesn't consist of one box but two different boxes.

So, thanks for pointing me in the right direction :)

My solution:

a, b {color: #1b649a; text-decoration: none; border-bottom: 1px solid #ddd;}
a:hover, b:hover {color: #073a60; border-bottom: 1px solid #073a60; }
a:visited, b:visited {color: #073a60; text-decoration: none; border-bottom: 1px dotted #073a60; }
a:visited:hover, b:visited:hover {color: #073a60; border-bottom: 1px solid #073a60;}

.ljuser a{border: none !important}

[stormy]

Yeah, it's definitely formulated by something that looks like this:

image link

With each section being its own link, and the style being applied to .ljuser being applied to each part.

[erika]

So, just to be clear, you're talking about the lines underneath the images?

[jana]

Yes, exactly.