9

I know paths are supposed to be relative to the css file, but that doesn't seem to be the case for an image that I'm trying to use as a cursor.

The file structure is:

Content/Site.css
Content/images/butteryfly.ani
Content/images/user.png

Site.css:

.butterfly
{       
cursor: url('images/butterfly.ani'), pointer;    
}

/*this works*/
.ui-icon-user
{
    background-image: url(images/user.png) !important;
    background-position: 0 0;
}

It works if I change it to:

.butterfly
{       
cursor: url('Content/images/butterfly.ani'), pointer;    
}

Why doesn't the relative URL work for the cursor?

Edit: Doesn't work in Chrome, Firefox or IE9. In all browsers it displays the hand cursor instead of the custom one.

Edit2: To follow up: how do I actually get this to work on my site, as the html pages sit at different levels? Is there a way to specify a relative URL somehow in css or should I just put a copy of the cursor at the same level as each page (which sucks!)?

3 Answers 3

14

You should use .cur extension to make it work both in IE and FF. And in IE11 and earlier the URL to the cursor file is relative to the page not to the css file.

cursor: url('http://example.com/Content/images/butteryfly.cur'), default;

Try to avoid using two url values as it results in an unnecessary hit to the server by IE. Instead, use an absolute URL which would work fine in IE, FF, and Chrome. Opera would use the default.

6

I only know that Internet Explorer interprets relative URLs as relative to the HTML document, but modern browsers (Mozilla Firefox, Google Chrome) interpret relative URLs as relative to the ".css".

/*
 The CUR and CSS files are in the same folder, the HTML is in a directory above this CSS     file
*/

#example {
  cursor: url('arrow.cur'),            /* Modern browsers    */
          url('style/arrow.cur'),      /* Internet Explorer  */
          default;
 }     
3
  • I tested in chrome too...also doesn't work there - I'll check firefox now > firefox also doesn't work
    – woggles
    Sep 17, 2012 at 7:43
  • Scratch my previous comment - it looks like IE treats cursor URLs as relative to the HTML document as well, not just the ones in filter.
    – BoltClock
    Sep 17, 2012 at 7:49
  • the first statement you make is not really true. Relative URLs behave generally the same in IE and the rest of the browsers for background images for instance. The only exception is when it comes to custom cursors URLs - IE doesn't interpret them as relative all of a sudden Mar 16, 2013 at 10:58
1

I suggest you read this short article. http://blog.stchur.com/2006/11/02/ie-bug-dealing-with-css-custom-cusors/

There are 3 workarounds for a IE bug - IE does not interpret custom cursors URLs as relative. Other types of URLs are interpreted correctly in IE

  1. use absolute paths
  2. move the cursors style in the html page between tags
  3. use IE conditional comments, similar to the solution provided by John C.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.