4

I have a custom cursor that is using an image. My original code:

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

I then discovered that Firefox requires you to define a default backup in case the image is not found, and changed it to:

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

This worked for Firefox and Chrome, but not 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 is relative to the html file rather than the css file that this code is included in.)

This didn't seem to help, so I found out about this bug and changed the image to a .cur file:

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

However, it is still not showing up in IE. Anything else I can try?

Community
  • 1
  • 1
froadie
  • 79,995
  • 75
  • 166
  • 235

2 Answers2

1

Most of what you've read is correct, but I'll make a few amendments:

  • Firefox does indeed require the additional parameter to be added. My understanding is that the ideal value for this is auto. But if default works for you, use it.

  • As you've been told, IE can only display cursors of the .cur file type. PNGs and GIFs do not work.

  • However, I've never heard anything about IE using a different path; the same path has always worked fine for me in all browsers (when using a CUR file, of course). You might want to provide a reference to where you heard this, but I'd suggest that dropping the second URL may solve your problems.

There's a good site called Quirksmode that has a lot of browser compatibility tables. In particular, they have a very thorough table covering CSS cursors, which shows exactly how to format it to make it work in all browsers, with examples and notes about the quirks.

Hope that helps.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • I included my reference for the IE path bug in the question... And removing the second url doesn't help. And thanks for the quirksmode link, but nothing there actually helps me :-/ – froadie Dec 31 '12 at 20:51
  • another SO topic to follow :: http://stackoverflow.com/questions/7419314/custom-cursor-image-doesnt-work-in-all-ies – beauXjames Feb 11 '14 at 20:31
0

If you're still trying to figure this out 8 years later...I'll add that some browsers have a maximum image size, so maybe yours was too big. I believe you want to keep it under 32x32 pixels.

dpow
  • 1