ansaurus

Question

CSS text-select cursor ie7, strange behavior

Answer 1

A:

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

stephenhay 2009-10-25 18:43:22

Yeppers, tried it. Doesn't work. I guess I'm hoping someone can give me something to "Google." Seems strange that not many folks have experienced this before.

Jeff 2009-10-25 18:48:40

Too bad: I thought transparent would be enough of a "background" to keep it from happening. I'm assuming you don't want any background? Otherwise, you could add one in a IE7 style sheet via conditional comments. Seems one of those rendering bugs for which there are no decent workarounds. (Javascript?) Sorry I couldn't help.

stephenhay 2009-10-25 19:19:03

Yeah, my only idea so far is to muck up my CSS and put a `background-color` that matches the main part of my site -- JUST FOR IE7, Lol.

Jeff 2009-10-25 19:46:58

Answer 2

A:

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

Seb 2009-10-29 22:26:39

Haven't tried that, but if it comes to that, I think I'd rather just set a background-color instead. Good suggestion, though.

Jeff 2009-10-30 09:45:20

THis sounds good. @Jeff: Did it help?

Pekka 2009-11-01 15:30:18

Answer 3

A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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.

Nathan 2009-10-31 18:42:19

Answer 4

+1 A:

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.

mercator 2009-11-03 23:29:59

Adding `position: relative;` to my #wrapper made no difference for me. As for wrapping my wrapper, well, I guess I'd rather live with the cursor oddity. =)

Jeff 2009-11-04 14:16:28

Fair enough. I'm curious, though, does adding the extra positioned wrapper fix it?

mercator 2009-11-04 16:07:33

Answer 5

+3 A:

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..

Zoe 2009-11-04 03:02:35

That still doesn't entirely fix it. The text cursor then appears on the entire block, including any padding and blank space on a partly filled last line, for example, instead of just the actual text.

mercator 2009-11-04 09:22:03

Agreed. Great idea, one I've already tried, but doesn't cut it for the reason cited by mercator.

Jeff 2009-11-04 14:10:10

Hmmm, need it *that* precise, do we? Oh dear.. please see my comment on the question requesting a bit more info on the reasoning.

Zoe 2009-11-05 02:29:02

Answer 6

A:

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.

puijob 2010-08-13 23:33:26

ansaurus

tags:

views:

answers:

CSS text-select cursor ie7, strange behavior

related questions