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

@ivovic: I like my underlines to be “dotted”, so you tell me how to do that without borders…

I think your right about it not being possible unless I want it everywhere . So I’ll have to add a custom class for my images or image links. I’ll have to modify one of the wordpress php files for that I think (if I don’t want to add it myself each time), but which one?

I can’t tell you how to do it without borders, but I can tell you to stop making your neurosis everyone else’s problem.

it’s just *not* that important.

… and if the style of underline is that important to you, the code’s right there, here’s a shovel.

@ivovic: sjees, relax man, I’m just looking for a solution to my problem. If you don’t care, just don’t react.

Have you tried this, put it somewhere toward the top:

img a, img a:link, img a:visited, img a:hover {
    text-decoration: none !important;
}

Try it without the !important statement first and if it works, then you will be fine. I’m worried that by using the “scorched earth” method (the !important statement), there might be an instance when you might WANT the linked image to have an underline. If so, you’d have to specifically declare it in whatever division it’s in and that !important statement might get in the way.

Does this make sense? Oh, and found this article discussing borders and links:
https://www.csstrickery.co.uk/2007/12/08/borders-as-underlines/

if ‘img a’ works, that’d be a bit of a css coup… given that links aren’t inside image tags.

interesting.

Oops, you’re right! It’s bass ackward. Haven’t had my requisite ration of caffeine yet and the sun she’s almost gone. And you had to make me go prove something to myself, didn’t ya? But I needed the exercise.

This

a img, .sociable a img {
	border: none important;
}

works. I have it up on a test site at https://wordpress.mytestbed.com. The sociable plugin that has all those little icons was surrounded by a 1 pixel border. The *only* way to get those suckers to go away was to add that second declaration in there. And if you don’t put !important those borders won’t go away.

Gah. {{slinks away in shame}}

That got me to thinking (something I haven’t done much of this weekend).. The reason that I had to add that specific rule for the sociable plugin is…? At first I thought it was because it embeds a stylesheet which trumps the style.css that WP calls in. But in that embedded stylesheet we have this little nugget:

.sociable img { border: 0; }

So what’s up with the borders? Weird.

the solution is to give images their own href attribute, you hear me w3c?

ps: extra-marital consolation available. enquire within ??

Don’t overlook the specificity rule in CSS. Try to make the global site styles as unspecific as possible. Then it makes it easier to override those stiles in specific situation. Try to use classes as selectors instead of ID’s because ID’s are more specific than classes since ID’s have to be unique on a page and classes don’t.
If for some reason the !important; doesn’t work, you’re probably dealing with another !important; value inside one of the stylesheets linked or embedded in the generated page. The !important; value should only be used for troubleshooting and not be left in the stylesheet. Unfortunately many plugins have their stylesheets filled with !important;‘s to override the themes’ stylesheet.

I can only recommend you look at the source code of the generated page and find all the styles linked to or embedded in it. Find all the !important; instances and check whether removing them solves the problem. The Developers toolbar for Firefox can be a great tool to do this with.

@ivovic: You are right, there are some things you can’t do with CSS. But this problem is not one of these things. It is very simple to have 4 links with images in them on the same page and style each of them individually with a different style, color or thickness of border or no border at all. It’s just a matter of being specific. In any case asking the W3C to change the (X)HTML to solve a CSS problem doesn’t make sense.

@spscheele: have you tried adding the #content in front of your selector? this makes it more specific. (just like jonimueller did with the class selector sociable ) If the XHTML code you’re trying to target looks like this:

<body>
<div id="content">
<p>text... <a href="#" class="link"><img src="image.jpg" /></a></p>
</div>
</body>

You can specify the CSS for the image like this:

body div#content p a.link img {
	border: none;
	text-decoration: none;
}

Chances are that there aren’t any other CSS rules as specific as that in any of the stylesheets of any plugin. But only do this as a quick fix. try to find the conflicting CSS and either get rid of it or make it more or less specific to target what it was written for.

@jonimueller: .sociable img { border: 0; } is targeted at the images while the border is styled by the link. The border, technically speaking, isn’t around the image, it’s around the link.

@all: Patrick Griffiths explains the whole CSS specificity deal on his HTML Dog website. Here’s the direct link: https://www.htmldog.com/guides/cssadvanced/specificity/.
The HTML Dog website is a great resource when you want to learn how to design websites the “right” way instead of the “looks alright” way. He offers free (X)HTML and CSS tutorials online on 3 different levels and explains it really well. If you know what he explains in those tutorials, this will all seem like kid stuff.