PDA

Click to See Complete Forum and Search --> : Removing underline during :hover on a

Vic
12-05-2006, 05:59 AM
I have specified the following style in my global stylesheet:

A { TEXT-DECORATION: none }
A:hover { TEXT-DECORATION: underline }

However, If I have an image or a span within the <a> object - as in the following example - I don't want it to be underlined:
<A><span id=NU>Not Underlined</span>Underlined</a>

I tried to set style of the span as:
#NU { TEXT-DECORATION: none }

But to no avail...

This problem only occurs in FireFox. Can anyone help?

PS. I use the following DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
beahawk
12-05-2006, 06:03 AM
Hi,

try putting in quote marks

<A><span id="NU">Not Underlined</span>Underlined</a>

also be careful with capital letters. Best to keep it all lower case.
ray326
12-05-2006, 09:51 AM
I suspect "nu" should be a class rather than an id. Have you tried this? Specificity may be getting you.

a:hover span.nu { text-decoration:none }
DJRobThaMan
12-05-2006, 12:12 PM
Actually, what I think is happening is your code is working fine.

Everything within the a tag is being underlined and nothing in the span is being underlined when you hover over the link. But you must remember that the a and the span are two separate elements. So the underline for the span has nothing to do with the underline for the a.

Well, maybe nothing is a harsh way to put it, but notice the difference between the following sets of code when you render them in a browser (I did this in firefox 2, I can only assume IE and others would render similarly):


<html>
<head>
<style type="text/css">

a
{
text-decoration: none;
}

a:hover
{
text-decoration: underline
}

a:hover span
{
color: red;
text-decoration: none;
}


</style>
</head>
<body>

<a>This <span>shouldn't</span> work</a>

</body>
</html>





<html>
<head>
<style type="text/css">

a
{
text-decoration: none;
}

a:hover
{
text-decoration: underline
}

a:hover span
{
color: red;
text-decoration: underline;
}


</style>
</head>
<body>

<a>This <span>shouldn't</span> work</a>

</body>
</html>


An easy, but impractical solution to your problem would be have a solid colour background and use the second example with the "color" attribute for the span set to that of the background. This would cause a break in the underline but the text within the span would become invisible. But this may be the beginning of the solution.

I was trying to figure something out with the text-shadow attribute but I couldn't get it to work (might not be fully supported yet). Anyway, good luck.

Douglas