Geek Answers Handbook

Cursor: automatic behavior in IE 8 and 9

I want to point the cursor: a pointer to the whole body tag, so the background of the page can be clicked, but I also want the rest of the page to work the way it was, so I'm trying to set the cursor: auto for the div that contains the page.

In FF, Chrome and Safari, it works fine, also in IE 6 and 7. But it seems that IE 8 and 9, as well as (screw) OPERA, have their own opinion about which cursor: auto means.

Here is a snippet to find out what happens:

<!DOCTYPE html>

<html>
    <head>
        <title>Cursor test</title>
    </head>
    <body>

        <div id="newBody" style="width:400px; height:300px; cursor:pointer; background:#ffddee; border:2px solid #ddaa66;">
            <div id="pageContent" style="width:200px; cursor:auto; background:#fff;">
                <p>This is a paragraph <a href="">click here</a>.</p>
            </div>
        </div>
    </body>
</html>

Although this is an HTML snippet, everything is done using javascript with the same result.

The standard says something really vague: UA defines a cursor to display based on the current context. Also, these pages did not help in this matter.

http://www.w3.org/TR/CSS2/ui.html

http://msdn.microsoft.com/en-us/library/aa358795%28v=vs.85%29.aspx

http://www.w3schools.com/cssref/pr_class_cursor.asp

https://developer.mozilla.org/en/CSS/cursor

- ?

+5
2

, auto ( ), cursor:default;, IE 8 FF 3.6.

<div id="newBody" style="width:400px; height:300px; cursor:pointer; background:#ffddee; border:2px solid #ddaa66;">
    <div id="pageContent" style="width:200px; cursor:default; background:#fff;">
        <p>This is a paragraph <a href="">click here</a>.</p>
    </div>
</div>
+2

CSS:

#pageContent {cursor:default}
#pageContent * {cursor:auto}​

- " " IE, , , .

+6

More articles:


All Articles