Remove line under image in link

I have a few instances where I place image within a link. Normally if you set border="0" there line under a link does not apply to the image. However, I had to specify DOCTYPE to be and now in FF I see the line under all images.

I still would like to have my links underlined, but not the images within.

<a href="link.php"><img src="img.png" height="16" width="16" border="0"> link</a> 

I've tried to solve it with CSS by adding

a img {
    text-decoration:none
}

Unfortunately it did not work. I also tried:

a img {
    border:0
}

IE does not "underline" my images within a开发者_高级运维 link... Any suggestions would be highly appreciated.

Example Link

I still would like to have my links underlined, but not the images within.

If you want to have a special case for links with images, give the a element a class and remove the text-decoration for that class:

HTML:

<a href="link.php" class="image-link"><img height="16" width="16" /></a>

CSS:

a img
{
  border: 0 none;
}
.image-link
{
  text-decoration: none;
}

This is great if you only have an image within the link, however you have both text and images within the anchor.

The solution for that would be to add a span around the text within the anchor:

<a href="link.php" class="image-link"><img height="16" width="16" /> <span>link text here</span></a>

and add an additional style in the stylesheet:

.image-link span
{
  text-decoration: underline;
}

A solution would be to use the image as a background image instead of in the html, possibly the background of the parent element of the a.

In case anyone cares, here's an alternative solution that I came up with to circumvent the issue:

.nl {
    text-decoration:none;
}

<a href="link.php" class="nl"><img src="img.png" height="16" width="16" border="0"><u>link</u></a>

a { text-decoration: none }

The underline is from the A-tag not the IMG

For those cases where editing the markup isn't an option (inaccessibility to templates and/or surrounding issues), you can use a little jQuery. You may need to adjust the syntax to override your CSS:

jQuery('a > img').parent().css({'text-decoration' : 'none'});

Solved

<a href="link.php" style="text-decoration: none"><img src="img.png" height="16" width="16" border="0"> link</a> 

If you are linking to an image, try the following:

a[href$=jpg], a[href$=png] {
    text-decoration: none;
}

My two cents:

$('a').each(function(){
    var images = $(this).find("img");
    images.parent().addClass('no_border_img');
});

Loop all links and find images inside, then for each one add CSS style to the link.

Only for a image with link inside a previous link style. Remember to create the style for 'no_border_image'.