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;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    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

Because different browsers treat relative URI's differently, the cursor style allows a list of urls. You can have one path that works for IE and one that works for other browsers:

div {
   cursor: url('app/images/zoomin.cur'), url('zoomin.cur'), auto;
}

In my setup, the first url works for IE11 (and earlier) because the script that uses the cursor is in 'cgi-bin/app' while the .cur and .css files are in 'app/images'. IE uses the document location as the base, so I need to add more path information to locate the cursor file. The second url works in Firefox because .cur and .css are in the same location and Firefox uses the .css location as the base, so additional path info is not needed.