CSS: remove stubborn underline from link

Question

I am attempting to have a link show up in white, without an underline. The text color shows up correctly as white, but the blue underline is stubbornly persisting. I tried text-decoration: none; and text-decoration: none !important; in the CSS to remove the link underline. Neither worked.

The html:

<div class="boxhead"><h2><span class="thisPage">Current Page</span &nbsp;&nbsp;&nbsp;&nbsp;<a href="myLink"><span class="otherPage">Different Page</span></a></h2> </div>

The css:

.boxhead .otherPage {

    color: #FFFFFF;
    text-decoration: none;
}

How can I remove the blue underline from the link?

Answer 1

The anchor tag (link) also has pseudo-classes such as visited, hover, link and active. Make sure your style is applied to the state(s) in question and that no other styles are conflicting.

For example:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

See W3Schools for more information on Pseudo-classes.

Answer 2

text-decoration: none !important sould remove it .. sure there isnt a border-bottom: 1px solid lurking about? (Trace the computed style in Firebug/F12 in IE)

Answer 3

Without seeing the page, hard to speculate.

But it sounds to me like you may have a border-bottom: 1px solid blue; being applied. Perhaps add border: none;. text-decoration: none !important is right, it's possible that you have another style that is still overriding that CSS though.

This is where using the Firefox Web Developer Toolbar is awesome, you can edit the CSS right there and see if things work, at least for Firefox. It's under CSS > Edit CSS.

Answer 4

As i have expected you are not applying text-decoration: none; to a anchor but to a span element.

Try like this:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

Also your span is not closed properly:

</span &nbsp;&nbsp;&nbsp;&nbsp;<a...

Should be:

</span> &nbsp;&nbsp;&nbsp;&nbsp;<a...

Answer 5

As a rule, if your "underline" is not the same color as your text [and the 'color:' is not overridden inline] it is not coming from "text-decoration:" It has to be "border-bottom:"

Don't forget to take the border off your pseudo classes too!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

This snippet assumes its on an anchor, change to it's wrapper accordingly... and use specificity instead of "!important" after you track down the root cause.