How to separate link style to images? don’t need the underline!

I have the same problem but I don’t think this is possible due to nature of CSS and the order it will apply styles.

I have a link style on my <p>’s but when an Image is put inside of a <p> (normal blog posts) with a link around it, it inherrits the <p> link style and there is no way to escape that. You can;’t go back in CSS.

The only way to do this is by adding classes to either your image a or the text links, that will style it differently.

Why this wouldn’t work for you?

a:link img {....}
a:visited img {...}
a:hover img {...}
a:active img {...}

for me or for Saicode?

Both of you.

I have a link style on my <p>’s but when an Image is put inside of a <p> (normal blog posts) with a link around it, it inherrits the <p> link style and there is no way to escape that. You can;’t go back in CSS.

Do you want your link styles to be different in paragraphs than in the rest of your blog? I can see no reason to specify them there.

wel.. I have this in my css:

p a, p a:link, p a:visited {
	color:#333;
	text-decoration: none;
	padding:2px;
	font-weight: bold;
	border-bottom: 1px dotted #ccc;
	}

p a:hover {
	font-weight: bold;
	color:#333;
	background:#ffff66;
	padding:2px;
	}

To style only the textlinks inside a <p>

So when I put an image inside a blogpost you get:

<div class="entry-content">
<a href='https://www.url.com'><img src="image.jpg" alt="" title="" width="500" height="290" class="alignnone size-medium wp-image-647" /></a>

And then the images inherrit the a style, and I tried using it like p a:link img {} but that doesn’t work…

Or am I missing something?

@jonimueller: I want to have different link styles for my body text, navigation and maybe some more different things indeed, but maybe you have a better solution to do that?

You can;’t go back in CSS

You can’t, but you can be more specific. To spell out what Moshu said:

#content a:hover img, a:active img {
	border: none;
}

BTW, did you notice that you only specified the #content container for the a:hover and not for the a:active?

Well the only good reason for different link styles within the same stylesheet/design is because some of the links appear on a different color background.

Too many different link styles, just for the sake of them, can confuse and frustrate your site’s visitors. Consistency is the key to a pleasant online experience. Just my two. Worth exactly what you paid… ??

@kalessin: I tried but that doesn’t work, they keep getting the other link style…

@jonimueller: even when I set a global link style and a specific img link style, the images keep inheriting the global style, whatever I try to do.

A lot of people forget than when you look at an (X)HTML page without any CSS styles imported or attached, you’re not looking at a clean style-less page. But you see the browsers default style. The browser styles make header tags bold and lager, adds margins to the body and blockquotes, underlines links and turns them blue etc.

When you want more control over your styles you can undo a lot of these styles with a wildcard selector in your CSS file. Just add something like this to the top of your stylesheet to rid you of those unwanted margins and other browser styles:

* {
	margin: 0;
	padding: 0;
	border: none;
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
}

This can also help solve those unexplained things you can’t seem to get rid of no matter how specific you make certain selectors.

You can als try using the !important; option behind the value it doesn’t seem to pick up. If it works you should look for a conflict with an other selector (maybe a stylesheet from a plugin or something that mucking it up)

@jbergem: that’s a good tip indeed, to clear the styles already present before you begin your stylesheet. That doesn’t solve my problem unfortunately, neither did the !important; option.

I’m testing this in FF by the way, so maybe it’s just a FF thing?

I think the problem is my text link style is to specific or something. It sets a padding, a color, a border, etc. I can’t really overrule that it seems, not even by making the image link styles more specific.

So I’ll have to find a way to automatically add a class to my image links. Anyone?

Are you declaring them in the proper order in the stylesheet? Pseudo classes like links have to be in a specific order and earlier some others posted link info and it was in that precise order, namely:

a:link img {....}
a:visited img {...}
a:hover img {...}
a:active img {...}

This means that if you have this in your stylesheet:

a:active img {...}
a:visited img {...}
a:link img {....}
a:hover img {...}

It likely won’t work. And Firehog is notorious about being sloppy with page refreshes. Sometimes not only do I have to clear its cache, but I often have to close out and relaunch it or worse yet, go to my command line and do this: ipconfig /flushdns

I think it’s important to accept that there’s just some stuff you can’t do…

and putting borders and crap on your anchor tags is one of those things, unless you want it to happen on *all* anchor tags.

’nuff said.

really, the effect isn’t worth it anyway – if you want underlines, use bloody underlines, not borders.