Question

Strange one here, hoping to get some feedback to point me in the right direction.

If my #wrapper or any of the child divs do not have a background-color applied to them, ie7 changes the normal "pointer" cursor into a "text-select" cursor when mousing around the page (whether mousing over text or not).

I thought I had fixed the problem a while back, but when I remove the background-color from my #wrapper or any of the children divs, the problem reappears.

Just looking for some hints or what I should be checking.

#wrapper {
    overflow: hidden;
    margin: 0 auto;
    width: 960px; /* using 960.gs */
}

#children {
    display: inline;
    float: left;
    margin: 0 10px;
    width: 940px;
}

EDIT:

Seems to be because the divs "hasLayout", but I'm still not sure how to fix it. See this link.

EDIT 2:

I can't find any more info on this "ie7 bug." Anyone who has any ideas, or even if you're aware of this bug and can just let me know so I know I'm not crazy. I'm getting really frustrated with Microsoft again. Already cost me an extra few hours of work this week. Seems like it never ends.

EDIT 3:

Here's another link of someone having the same problem.

EDIT 4:

STACKOVERFLOW.com suffers from this bug! So does mashable.com. I guarantee MANY web devs have this bug on their site and they don't even know it.

Check it out for yourself... hover your cursor around the page of either site. Notice it turns to a text-select cursor when it shouldn't.

Seems like it would be easy to fix with the cursor property, but the problem would be triggering proper text-select-cursor behavior when required.

Was it helpful?

Solution

Is it too hacky to explicitly state what cursor should go where?

html {
    cursor: default;
}

h1, h2, h3, h4, h5, h6,
p, li, label, td, th {
    cursor: text;
}

a:link, a:visited, a:hover, a:active {
    cursor: pointer;
}

etc..

OTHER TIPS

I'm pretty sure I have encountered it before, but it's probably a bit too subtle to really notice during some superficial browser testing. But I've certainly also had issues fixed by setting a background color.

As far as I can tell, the best way to fix it is to position the element causing the problems, or add a positioned wrapper div around it. You would most likely use position: relative, though absolute and fixed should work too.

Positioning the element itself usually works, but adding a wrapper div might work more consistently.

E.g. adding position: relative to the .post-text class fixes the cursor on the questions and answers on this page.

The transparent 1x1 px GIF works and is also an excellent fix for This and other bugs in IE 6 through 8. I would add something like this to my conditional comments for all IE:

* {
    background: url('images/fix1.gif');
}

Have you tried setting background-color:transparent; explicitly? Does that help?

This may sound like an ugly hack, but have you tried setting a transparent 1x1 px GIF (AKA spacer) as background?

This is not perfect, but for this little example it seems to work for IE 7.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="overflow: hidden; margin: 0 auto; width: 140px;">
   <div style="position: relative; display: inline;">
      <p>
         Here is some test text that will wrap.
      </p>
   </div>
</div>
</body>
</html>

I have no idea why this seems to work, and it is certainly not ideal. For some reason putting the p element in an inline relatively positioned div makes the mouse cursor behave more like I'd expect.

I'm not sure that this works in a broader sense though when there is a hierarchy of elements.

I realize this is not a perfect answer, but it might spur other ideas.

Delilah's solution, only a little bit simplified works great for me and also solves mercator's issue.

div { cursor: default; }
div * { cursor: auto; }

The problem is you have to create another css file and address it using conditional comments not to brake other browsers.

PS: This issue becomes very annoying with dark background websites.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top