CSS issue: IE 6+ not display 'cursor' correctly - ninja help needed

Question

IE 6+ is displaying the cursor as a text icon and not a mini-hand (pointer) as it should.

My Live Example show how if you hover over a tab (All/Fore Sale/...), in IE - it displays a text-cursor but Firefox/etc it displays correctly as a "pointer".

This is applied to the ul.tabbernav li a:hover CSS property.

Any idea why IE is not displaying the cursor as a pointer when you hover over the tabs on my page?

Answer 1

Pointer should always be used, however for really old IE there's a solution at the bottom of this page:

http://www.learnwebdesignonline.com/css-tutorials/cursor-hand-pointer.htm

Answer 2

cursor: pointer;

This works in IE 6+, Firefox & Chrome for me.

Answer 3

According to the site you referenced and my own testing

cursor: pointer

works in IE6-8, Safari, Firefox, and Chrome.

As the site indicates

By changing the value of the cursor declaration you can assign cursor styles to various HTML elements. Although in theory this is great functionality, it's very easy to confuse your users by defining inappropriate cursor styles. Please be very careful; in general the browser defaults work fine, and besides they're what the user expects.

Tread lightly.

Answer 4

<style>

.element {cursor: pointer; }

</style>

<!-- the following as an example -->
<!--[if lte ie7]>

<style>

.element {cursor: hand; }

</style>

<![endif]-->

Covers all the bases, with only IE (less-than, or equal-to) 7 picking up the latter conditionally-commented style rules (though I think IE6+ understands cursor: pointer, but I'm not sure).

Answer 5

Use both. cursor: hand; cursor: pointer; or cursor: hand, pointer; Can't remember now which one worked fine for me when doing clickable tables...

EDIT:

Apparently there's a specific order to get it working cross-browser:

cursor: pointer; cursor: hand;

Just tested it in IE8, Firefox, Safari and Google Chrome.

Answer 6

I believe your not getting the pointer because a href isn't getting set on the for sale, for rent and apartments <a> tags. It works on the All tab where the href is set to javascript:void(null);

Answer 7

The problem lies with trying to link a div (you probably already know that) thus switching it to an a tag would remove the problem. Then have javascript catch the click and return false thus no page reload?

Also you really should pick up a js framework. Thats a lot of js that could be reduced using jQuery, mootools or whatever.

Answer 8

Adding the "cursor:pointer" to the 'ul.tabbernav li a' resolved the problem, per eulerfx advice