IE6: JavaScript hyperlink not working

Question

I'm using JavaScript to sort a table on an HTML hyperlink:

This sort from Low-to-High:

<a id="asc" href="#" onclick="javascript:sort('asc');">Low</a>

It works great in Firefox/Chrome/Safari but does not work in IE6.

Live site at: http://tinyurl.com/ykzwb2

Click the Sort "High" or Sort "Low" link.

Any idea why it works in all browsers but IE6?

The root cause seems to be that IE6 is not changing the cursor arrow to a small-hand so that the hypertext is even clickable. Right now, when I hover over the links with IE6 - the Sort links are not even clickable

Also, my page passes w3 validation, so that's not the problem

Answer 1

Try:

<a id="asc" href="javascript:void(0)" onclick="displayHomeListings('asc');">

Or

<a id="asc" href="#" onclick="displayHomeListings('asc');">

Ideally, your click will still do something sensible if JavaScript is disabled on the users browser. In that case,

<a id="asc" href="failsafe.html" onclick="displayHomeListings('asc'); return false;">

Note the return false at the end of the onclick. The stops the href from being visited if the JS succeeds. See this SO post regarding further discussion on that topic.

EDIT:

Now with your additional information in your question about the hand/cursor:

If the cursor is not changing to a hand when hover, this suggests to me you have some sort of invalid HTML, and IE6 is failing to parse the page in the way you expect. Have you tried running it through an HTML validator? Try http://validator.w3.org/.

Answer 2

Not sure if you are opposed to using jquery, but it tends to work out a lot of these cross-browser incompatibilities.

http://jquery.com

Just a thought.

But, just to add to what Matt is saying, you can try this option to (it usually works in IE):

<a id="asc" href="javascript:displayHomeListings('asc'); void(0);">link</a>

(just remember that it won't work for people without javascript... it just won't do anything...)