cursor: hand; and cursor: pointer explanation – level 200

Even though FireFox is now losing ground to Internet Explorer, web developers must still ensure websites and web applications look good and function well in all the browsers potential customers may be using. It is irresponsible to only test a web application in one browser when users may use the application for multiple browsers.

There are many special things one must do to ensure browser compatibility. Using CSS is one of them, but even with a well-defined style sheet, browser differences can cause headaches.

In order to ensure that the mouse pointer is a hand over any given element, use:

*.myStyle
{
cursor: hand;
cursor: pointer;
}

This will be effective in all the major browsers. cursor: hand; works in IE, and without testing with another browser, one would not find this visual bug. FireFox, for instance will only recognize cursor: pointer; IE 6 will recognize cursor: pointer, but IE 5 won’t. Using both declarations will ensure the proper look in all the major browsers.

References:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/cursor.asp
http://www.quirksmode.org/css/cursor.html

Dave Donaldson 8:30 pm on August 28, 2005

Ah, excellent tip. I wasn’t aware of cursor:pointer. Thanks.
Josh 2:53 am on August 29, 2005

How does using CSS ensure browser compatibility? I’ve seen the opposite effect in reality. Using the non-css approach to formatting (tables, font and bold tags, etc) seem to be a lot more consistent across browsers.
I understand the benefits of CSS and semantic HTML, but I wouldn’t tout browser compatibility as one of them. My experience is that you have to work harder on compatibility when using CSS, because of the different implementations.
Andreas Kraus 5:51 pm on August 29, 2005

Yes, you have to work harder, but in my opinion it’s absolutly worth it. I stick to CSS only.
Jeffrey Palermo 3:09 am on August 30, 2005

I guess one could say that if we stuck to Html 3.2, we’d have the best compatibility, and if we used no CSS and no Javascript, we’d have ultimate compatibility, but that’s unrealistic. The power the new technologies bring is worth the extra effort, and while we are using the technology, there are things we can do to ensure browser compatibility, and this is one of them.

I guess you’re point is valid when that sentence is read critically.

Thanks for the input.
Leon 4:17 pm on September 7, 2005

CSS may seem a foreign concept to some of us that have been doing this for a long time, but the long term flexibility and bandwidth cost reduction make it well worth the time. I would like to point out though that you may want to alter the markup slightly to comply with the CSS spec. Here’s an elegant hack for most modern browsers…

.MyStyle
{
cursor:pointer !important;
cursor:hand;
}

this will tell the standard browsers to use the first property and ignore the rest. IE doesn’t support !important yet and always implements the last definition when a duplicate appears. This way if IE 7 behaves in the same fashion it will adhere to the standard if it can and use the backup if it can’t. This trick also works well for the box model. I think of it has a forward compatible hack…not perfect but does the trick! 🙂
Jeffrey Palermo 6:19 pm on September 7, 2005

IE 6 supports !important. I’ve had to use it several times. I haven’t checked to see that it’s usage is exactly according to the standard, so if that’s what you are talking about, please elaborate on the divergence from the W3C standard.
Leon 6:49 pm on September 7, 2005

According to the standard the last rule specified takes precedence. But if you use important after a command then that command will take precedence. IE ignores this rule I’m cutting and pasting a simple example…run them in IE and Firefox to see the difference.
.Test
{
color:red !important;
color:blue;
}

so just put a div on a page, class it Test and run in both. the text should be red in FF and blue in IE.

The good news is that this is somewhat of a forward compatible hack, in that, by use if IE7 supports !important (it will according to the IE Blog) then it will automatically use the !important commands while IE6- uses the hack in place. I hope that clears up my previous post! 🙂 PS- I really enjoy your blog. Thx, Leon
Rasika 7:36 am on January 10, 2006

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 – “Unknown Property Cursor – declaration dropped”, This happens even if you use _cursor, !important, any hacking method…

Any body has an idea, how to avoid this error message on Firefox, and yet work with all browsers.

Thanks

Comments are closed.

Programming with Palermo

Jeffrey Palermo, Microsoft MVP, Author, Speaker, Clear Measure Chief Architect, Azure DevOps Expert

cursor: hand; and cursor: pointer explanation – level 200

Related