How do I remove the underline from an image wrapped in an anchor?

Anyhow, I have a problem. A tiny problem I suppose, but one that's bugging me. I updated the CSS for my anchors on my blog, so that they were underlined with a border. Problem now is all my images that were linked are underlined, and it looks wrong.

So I assume the only way to fix this is to apply a CSS class to all the images inside anchors so that they have border: none;. I don't know how to do 开发者_开发百科this though. Anyone willing to explain if this is even possible? Thanks in advance.

Try this:

<style type="text/css">
a img { text-decoration: none } // Images within 
</style>

However, this is awfully general and if your anchors have padding, it won't work entirely, there may be residue underlining to the right and left of your image.

It would be better to turn underlining for links off in general, define a CSS class for your anchors, and turn underlining on in that class:

a { text-decoration: none }
a.my_anchor_class { text-decoration: underline }

Try this:

a img { border:none; vertical-align:top; }

It moves the underline to the top and underneath the image.

Underlining is controlled by the text-decoration CSS property. So if you want to turn that off:

a { text-decoration: none; }

In jQuery, you could use the has selector to add a class to all links that have an image inside them:

$('a:has(img)').addClass('image-link');

Then remove the border from those links in your CSS:

a.image-link {
    border-bottom-style: none;
}

It would only work when JavaScript’s enabled though.