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

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 2

I know that it is old topic, but maybe somebody will considere it helpful -
"text-decoration" attribute, mentioned above, can be passed to ActionLink by construction like this:

@Html.ActionLink("Display_Name","Action_Name",null,new {style="text-decoration:none;"})