Removing the underline from an Html.ActionLink

Question

I have an Html.ActionLink on my page and I am using the following CSS on it to give it an image and try and remove the underlining.....

a.searchButton
{
    background-image: url(/content/images/DropAcross.png);
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    display: block;
    text-decoration: none;
    clear:none;
}

Can anyone see a problem with this? All the CSS properties seem to work apart from the text-decoration: none, which seems to leave the underline in place.

Answer 1

What about border: 0px? And you might want to check the element's style attribute since it overrides the values you define inside the <style> tag.

Answer 2

You would have to look at the rendered html. In Firefox or Google Chrome, right click and choose Inspect Element.

You might find something silly like the searchButton class is being applied to a span that wraps the a tag, in which case, you would get everything working except the link specific rule:

text-decoration:none;

Answer 3

Setting text-decoration:none; ought to work.

Is it possible that there are some other styles overriding it? Have you looked in Firebug (or similar tools) to see what styles are being applied?

One possible answer may be the :hover, :visited and :active pseudo classes. If they are set to have an underline, then they will override the default style for the element.