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