Wednesday, December 7th, 2005

CSS Cross browser mini-tip: Point to the Hand

Category: Browsers, CSS

You want to tell the browsers via CSS to change the pointer icon to be a hand.

Firefox uses the standard pointer, whereas IE has used hand.

The cheaky work around? IE ignores underscores:

cursor: pointer; 
_cursor: hand;

Any other cheaky hacks that you have had to use to Get Things Done ™ ?

Posted by Dion Almaer at 10:27 am
16 Comments

++++-
4 rating from 44 votes

16 Comments »

Comments feed

actually its the other way around, IE reads attributes that contain an underscore at the beginning.

Comment by kenrick — December 7, 2005

I think that’s what he means: IE ignores the underscore, therefore it sees “cursor”.

Comment by littlecharva — December 7, 2005

If you put that in your CSS file, it will not validate.

Use this method instead:

* html #YourItem {
cursor: hand;
}

Comment by Ã?rni Gunnar — December 7, 2005

I believe that while IE uses “hand”, it also understands “pointer”, which is the standard, so I just use pointer all the time, and forget hand. It’s proprietary.

Comment by Brandon — December 7, 2005

I personally really don’t care if my CSS validates or not.

I just can’t explain to my boss that it had cost me 4 hours of extra work to get my css ‘standards compliant’ AND get a page to look in IE like it does in FF and to get things done quickly, this is a great easy and ‘clean’ option to use instead of a (in my eyes) nasty comment hack.

Comment by SchizoDuckie — December 7, 2005

label {
cursor: pointer;
cursor: hand;
}

Why the two cursor declarations? The CSS standard dictates “pointer” as the value for a “pointer that indicates a link”. Unfortunately, IE 5 and IE 5.5 for Windows don’t understand this value, using “hand” to mean the same thing. By placing pointer first misbehaving Microsoft browsers ignore it and use the hand value, while better behaved browsers take pointer and ignore hand.

http://www.sitepoint.com/print/simple-tricks-usable-forms

Comment by Treseks — December 7, 2005

Will this still work in IE7, though? Seems to me using IE conditional comments would be better (this will also validate properly).

Comment by Keith — December 7, 2005

ARGH my eyes! I am blind after seeing this ugly hack. What the hell is wrong with good old user agent detection?

Please, if you MUST use this sort of ugly hack due to a short deadline, please at least have the decency of commenting this in all caps “/* UGLY HACK */”

Comment by Bernardo — December 7, 2005

Internet Explorer understands pointer unless it’s running in Quirks mode.

Comment by Anonymous — December 7, 2005

IE6 in strict mode understands ‘pointer’. No need to use the underscore-hack, FF will ignore the ‘cursor: hand’ anyway…

Comment by Michiel Jelijs — December 8, 2005

Treseks wrote exactly what I was going to suggest. No underscores are needed.

Comment by David Carrington — December 8, 2005

Good software is written so that its intent is obvious. If your intent is to specify the “hand” cursor for IE and the “pointer” cursor for all other browsers, why on earth _wouldn’t_ you use an IE conditional comment??

Anything else might seem cute and clever at the time, but will cause someone pain eventually, when it does something strange for no reason and no one knows why the code was written the way it was.

Comment by Travis Wilson — December 8, 2005

Although latest IE versions do not require cursor:hand, old versions still need it. But when both cursor:hand, and cursor:pointer is declared, so as to make it work on all browsers, Firefox gives an error – d”eclaration dropped for cursor”, This happens even if you use _cursor.

Comment by Rasika — January 10, 2006

I tried cursor: pointer; and it works on both IE and Firefox.

Comment by kourge — January 19, 2006

@kourge

yes ie6 maybe, but it might be HANDY to support earlier versions too. ;)

Comment by dufus — May 24, 2006

HANDY?! Oh no you ditt’n!

Comment by Darnell — September 18, 2006

Leave a comment

You must be logged in to post a comment.