hasLayout.net

Bookmark and Share

Custom Cursor Bug

Table of Contents

Affected Versions

This bug affects: IE8, IE7, IE6

Symptoms

custom cursors do not appear in IE

Date of the Tutorial

Fri Jul 17 17:26:30 2009

Description

This is rather a rare bug, not only many people avoid using custom cursors (that is using url(foo.cur) for cursor property, but also, the conditions to meet the bug are rare as well.

Demo

Due to the nature of the bug, the demo is located on a separate page

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="stylesheet" href="../b/sheet.css" type="text/css" media="screen,tv,projection">

<div>TEST</div>
CSS Code:
div{
    height: 500px;
    width: 500px;
    margin: 20px auto;
    cursor: url(cursor.cur), crosshair;
    background: #f00;
}

About the code, we have a document that is linking to a stylesheet located in a different directory. In that stylesheet we are setting cursor property to a custom cursor and the url() is relative to our CSS file. However, in IE that cursor doesn't show up. What's up with that? The reason for it is that IE resolves the path to the cursor relative to the current document (our HTML document) and thusly gets a 404.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution)

Date of the Solution

Fri Jul 17 17:40:26 2009

Fixed Versions

all of the affected

Description

Since we now know what is causing the cursor not to load in IE, the solution becomes obvious - make the path to cursor "absolute" (i.e. starting from web root):

Due to the nature of the bug, the fixed demo is located on a separate page.

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="stylesheet" href="../b/sheet_fixed.css" type="text/css" media="screen,tv,projection">

<div>TEST</div>
CSS Code:
div{
    height: 500px;
    width: 500px;
    margin: 20px auto;
    cursor: url(/demos/cursor/b/cursor.cur), crosshair;
    background: #f00;
}

The cursor property url() now has an "absolute" path and it works in all browsers. Note: if changing the path this way is not an option for you, simple use conditional comments to feed a different url() to IE - the one that is relative to the HTML document.

Comments

Create new comment

Currently there are no posted comments.

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: