CSS Cursors are not working in WebKit browsers

问题:

I am having trouble with cursors not being pulled through in WebKit browsers. Surprsingly IE and Opera work as I expect them to. Here's the CSS

    .olControlDrawFeatureActive {
         cursor: url(<DOMAIN>/common/images/cursors/draw.png), crosshair, default;
    }

It quite simply changes the cursor to either the Draw png or, if it doesn't accept custom cursors or PNGs (like IE or Opera) then it should default to the crosshair. Works fine in IE and Opera, it goes to the crosshair as I want it to, FireFox, Safari and Chrome on the other hand refuse to return any css for this at all. Looking at the returned CSS in Firebug I just get.

    .olControlDrawFeatureActive {
    }

Empty, and utterly useless. I have tried replacing the URL with it's full path and relative path and (and this is the most confusing bit for me) I have tried removing the custom cursor entirely so it should default to the crosshair, but still it just returns an empty CSS rule! It's been bugging me for a while now because it originally worked fine in Webkit but not in IE, got it working in IE and now WebKit decides to not play ball! Am I doing something really obvious wrong? Any help or pointers would be hugely appreciated as it is driving me bananas

回答1:

Found the problem! After ages of looking and tweaking I finally post my first question and then answered it within a few minutes. Oh dear. The problem seemed to lay in the fact that I had specified 3 levels of cursors i.e. The Custom one, the Crosshair and the Default cursor. There was no need to have the default one in there anyway as Crosshair is accepted by all browsers. Removing this seemed to make it work.

This seems strange though, does CSS only allow for two levels of cursors? If so then why did Opera and IE accept it, do they just ignore the first one?

Oh the joys of working cross browser! Lets be fair, if they were all the same half of us would probably be out of a job...

Fixed CSS

    .olControlDrawFeatureActive 
    {
        cursor:url(<DOMAIN>/common/images/cursors/draw.png),crosshair;
    }

If anyone wants to add anything please feel free, I'm sure it will be useful to some poor sod such as myself :)