Question

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

Answer 1

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?

Fixed CSS

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