homepage Welcome to WebmasterWorld Guest from 204.236.254.124
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Stop image links from getting text-decoration underline
Mike521




msg:3686875
 2:20 pm on Jun 30, 2008 (gmt 0)

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




msg:3686889
 2:33 pm on Jun 30, 2008 (gmt 0)

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




msg:3686992
 4:42 pm on Jun 30, 2008 (gmt 0)

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




msg:3687066
 6:30 pm on Jun 30, 2008 (gmt 0)

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




msg:3687068
 6:31 pm on Jun 30, 2008 (gmt 0)

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




msg:3687114
 7:14 pm on Jun 30, 2008 (gmt 0)

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




msg:3687151
 8:07 pm on Jun 30, 2008 (gmt 0)

>>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




msg:3687174
 8:46 pm on Jun 30, 2008 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved