Are cursor URLs relative to the css file?

Question

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!)?

Answer 1

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;
 }