Geek Answers Handbook

The evolution of my custom cursor code: How to make it work in IE?

I have a custom cursor that uses an image. My source code:

cursor:url(../images/drag_mini_bg.png);

Then I discovered that Firefox requires you to define a default backup if the image is not found, and change it to:

 cursor:url(../images/drag_mini_bg.png), default;

This worked for Firefox and Chrome, but not for IE. I read that IE uses a different source for the path than other browsers, and implemented this solution :

 cursor:url(../images/drag_mini_bg.png),url(/images/drag_mini_bg.png),default;

(The second url refers to the html file, not the css file in which this code is included.)

This did not help, so I found out about this error and changed the image to a .cur file:

 cursor:url(../images/drag_mini_bg.cur),url(/images/drag_mini_bg.cur),default;

However, it still does not appear in IE. Anything else I can try?

+4
source share
1 answer

Most of what you read is correct, but I will make a few corrections:

  • Firefox really requires the addition of an additional parameter. I understand that auto is the ideal value for this. But if default works for you, use it.

  • As you were told, IE can only display .cur cursors. PNG and GIF do not work.

  • However, I have not heard anything about IE using a different path; the same way always worked perfectly for me in all browsers (of course, when using the CUR file). You might want to provide a link to where you heard this, but I would suggest that removing the second URL might solve your problems.

There is a good site called Quirksmode that has many browser compatibility tables. In particular, they have a very comprehensive table containing CSS cursors that shows how to format it so that it works in all browsers, with examples and quirks notes.

Hope this helps.

+1
source

More articles:


All Articles