Custom cursor image doesn't work in all IEs?

Unfortunately, cursor is plain buggy in IE, at least until and including 8

In Internet Explorer for Windows up to and including version 8, if a relative URI value is specified in an external style sheet file the base URI is considered to be the URI of the document containing the element and not the URI of the style sheet in which the declaration appears.

http://reference.sitepoint.com/css/cursor

You may want be able to use a conditional comment to target IE and then feed it a modified style rule with a different url.


I solved in this way for the grab cursor in Internet Explorer, citing the @JasonGennaro's answer:

In Internet Explorer for Windows up to and including version 8, if a relative URI value is specified in an external style sheet file the base URI is considered to be the URI of the document containing the element and not the URI of the style sheet in which the declaration appears.

.grab_cursor {
    cursor: grab !important; /*Without !important the .cur-file property below will overwrite this and browser will show default cursor*/
    cursor: -moz-grab !important;
    cursor: -webkit-grab !important;
    cursor: url('../img/cursors/openhand.cur'), url('img/cursors/openhand.cur'), n-resize; /* standard: note the different path for the .cur file */
    cursor: url('img/cursors/openhand.cur'), n-resize\9; /* IE 8 and below */
    *cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 7 and below */
    _cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 6 */
}

Files tree:

index.html
css/style.css -> here the posted code
img/cursors/openhand.cur

Good references:

  • One
  • Two
  • Three

Working Demo:

  • Demo