How can I remove the underline of a linked image in Firefox and Chrome?

My table headers contain link开发者_运维百科s that, when clicked, make an AJAX call to change the sort order.

<tr><th><a href="Name" style="display:block;">Name</a></th></tr>

This is great, I can click anywhere within the table header to activate the link.

Now I want to add sort arrows to indicate the sort order.

<tr><th><a href="Name" style="display:block;">Name<img src="arrow.png" /></a></th></tr>

This looks good in IE8:

However in FireFox and Chrome the image also has the underline:

I've been playing around with different css properties and I can't get it to work how I want. How can I get this to work in Firefox and Chrome like how it does in IE8?

Note that I want to have the whole cell to be clickable, so I need to use "display:block;" for the link and I also need the link text and image next to each other, so using "display:block;" on the image is not an option.

Thanks!

Try this

a{text-decoration:none;}
a:hover span{text-decoration:underline;}
<tr>
    <th>
        <a href="Name" style="display:block;">
            <span>Name</span>
            <img src="arrow.png" />
        </a>
    </th>
</tr>

Assuming the image needs to be inside the A tag, wrap the text in a span, then using css remove the underline from the A and place it on the SPAN.

style="decoration:none;"

on the link will take away the underline.... if you want the image to be a part of the link surround it with a 2nd link that does the same thing and give it that style.

or a img{text-decoration:none;border:none;}