Custom cursor image doesn't work in all IEs?

Question

I think I have tried different methods suggested all over the internet but nothing worked. This is my current css code:

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

It works fine except in IE...

Answer 1

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.

Answer 2

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

Answer 3

this one work for me proved in IE10, INDEXED in the of index.html( you must use absolute routes)

<style type="text/css">
    .container{
    cursor: url(http://path/of/folder/image.cur), default !important;
        }
</style>

Answer 4

I tried using .ani and .gif and it is working. It should go like this:

body {
cursor: url(images/dog.ani), url(images/dog.gif), progress !important;
}

This css works for my website in chrome, firefox and IE.

Answer 5

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.

Answer 6

from : http://www.w3schools.com/cssref/pr_class_cursor.asp

The cursor property is supported in all major browsers.

Note: Opera 9.3 and Safari 3 do not support URL values.

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".