Custom cursor not working in IE8

Question

I have several img tags (which are all part of the class popover) which I offer the possibility to the user to enlarge on click. So that they know the images can be zoomed-in, I want to change the img's cursor for a custom one (since zoom-in is not an available value for the cursor property in IE):

.popover 
{
    cursor: url('../Images/zoom.cur'), default;
}

This works very well in Chrome and Firefox but it does not in IE8 (the IE version I tested, but I suspect it does not work any better in the other versions). In order to find a solution, I read this article that specified the following:

.. in IE, for style sheets, the base URI is that of the source element, not that of the style sheet. Totally opposite to W3C specifications, but, yeah … that’s MSIE.

The source element would be my ASP.NET page Index.aspx. This is how my project is structured (I included only the referred files):

Project.Web
├── Css
│   ├── style.css
├── Images
│   ├── zoom.cur
├── Print
│   ├── Index.aspx

So, technically, the correct URI for both IE and the other browsers would be '../Images/zoom.cur', since my cursor image is located in the Images folder which is located at the root of my web project. Is there something I'm missing in order to make it work in all browsers?

Answer 1

I figured it out. My mistake was that in order to create my .cur file from a .png file, I just changed the extension in the Windows Explorer. Then, specifying this:

cursor: url('../Images/zoom.cur'), default;

Would work for modern browsers, but not for IE. The reason why that didn't work is that it compressed the file and not all browsers can read the compressed ones. So I used an online tool to convert my file correctly.

Be aware, I suggest that your .png file should be of size 32x32 before converting it, because IE9 (and IE8 for me too) seems to resize cursors that are smaller than this to 32x32.

Now, if you keep the above CSS line, it is going to work for IE, but not for modern browsers. For some reason I don't understand, the new uncompressed .cur file does not work anymore for modern browsers like Chrome. So, I decided to use the original .png file for the modern browsers. My final CSS line is:

.popover 
{
    cursor: url('../Images/zoom.png'), /* Modern browsers            */
            url('../Images/zoom.cur'), /* Internet Explorer          */
            default;                   /* Older browsers and Firefox */
}

For people who are confused on why the default value is necessary for Firefox, the article that helped me solve my problem said it pretty well:

You must add a default “built-in” cursor after your custom cursor, or the custom cursor will not load in Firefox. Think of it as Mozilla’s way of enforcing good web practices.