Question

My table headers contain links 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!

Answer 1

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>