Stop image links from getting text-decoration underline

[Mike521]

Has anyone ever found a solution to the problem where your images become underlined when they're inside a link? If the stylesheet says

a { text-decoration: underline; }

and then you have a link like so

<a href="#"><img src="whatever.jpg"> <br> Here's some text.</a>

The image will also be underlined with the text. This is valid and correct, although IE7 doesn't show it.

I've been digging around google and found some ideas that are mostly 6 - 12 months old so I'm hoping maybe someone has found a new solution. The other ideas, which don't work for my situation, are:

img {display:block;}

or

<a href="#"><img src="whatever.jpg"> <br> <span class="UnderlinedText">Here's some text.</span></a>

I can't use the first option because display block on my images really messes up my design. Trying to fix that by floating the images is helpful but still makes life difficult.

Second option will work partially -- but what if you want the text to only be underlined when the visitor hovers over the link. With this option, the text will only be underlined if they hover over the text -- hovering over the image will not make the text get underlined.

So, has anyone found an even better way to have your cake and eat it too?

[4css]

Have you tried text-decoration: none;

What you can do most likely is give your img a class so that you can apply the style to the image.

a img {text-decoration: none;
}

So this is saying that the image within the anchor link you don't want any underline on.

Just a suggestion.

[Mike521]

thanks 4css, unfortunately that doesn't work. CSS specs say that if a link is to be underlined, everything within it will be underlined as well regardless of the individual styling (or something to that effect, I can't remember exactly what it said and where it was written).

But the point is, telling the image to not be underlined doesn't work, the statement is ignored. IE7 doesn't ignore it, but FF does

[garann]

My first choice would be to make the image a background on the link and give the link extra padding. Is that an option?

[4css]

did you do a google on this?

Also, are you sure it is an underline and not part of a border around the image?

And is it important that the text is underlined for a link? Will people realize that you are placing a link there without it being underlined?

I would have thought that the above would have removed the link for you. Did you try to validate it the way I showed you to see if it would validate?

[Mike521]

thanks again -- garann, the background image idea would probably work, I'll give that a shot. I bet it's the best option and least hack-ish

4css, I did a bunch of googling before posting this, that's where I got the other two solutions from, but they were several months old so I was hoping someone had come up with a new method since then. The underline is definitely an underline, not a border -- I haven't validated this particular example but I've validated pages where this is in effect and came out clean

Here is the relevant part of the CSS spec so you can see that it's correct, much as I might dislike it:

[w3.org...]

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence. The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the element.

[Marcia]

>>a { text-decoration: underline; }

Why do you even have to specify that for ALL links, when underline is the default? Why not leave it to default (which does not underline image links), and only use {text-decoration: none; } as a specific in divs or classes that are distinct sections - like maybe side navigation.

Just tested to double-check:

<a href="foo.html"><img src="images/widget.gif" width="60" height="53" border="0"><br>
Link </a>

The text is underlined (that's the default" -for text links) and the image is not underlined. You're specifically over-riding the default (which is just for text links) and invoking specificity by telling the browser to underline anything that's an a href= which will not happen if you leave it at the default.

[edited by: Marcia at 8:14 pm (utc) on June 30, 2008]

[Mike521]

because I was trying to simplify the example just so I could present the problem and see if there was a solution. Here's a less simplified version:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
a:link, a:visited { text-decoration: none; }
a:hover, a:active { text-decoration: underline; }
img { border: none; }
</style>
</head>
<body>
<p><a href="#"><img src="/any/image/you/want.jpg" width="200" height="50" alt="an image"><br>
Link Text</a></p>
</body>
</html>

Now you have no links underlined by default, but on hover they get an underline (some people like it that way). If you throw an image into the link, the image gets underlined too. This is valid HTML 4 and CSS 2 strict, but the problem is not apparent in IE7.