ansaurus

Question

Answer 1

+1 A:

I don't know any hack to beat it. But, if smth could be clicked it should be in a tag, so insert a and maybe display:block. href could be =#. That solution seems to be semantic and good for me :)

Rin 2009-10-04 11:30:38

Thank you, but nope, I've just tried to substitute div to a in my example: <a class="icon-button ui-icon" href="#"></a> - it did not help...

Andrey Tkach 2009-10-04 11:41:27

I mean, insert `a` to `div`, default `a` cursor is pointer :)

Rin 2009-10-04 11:45:20

I agree with Rinz. It's probably best to use a link with an image (`<a><img/></a>`), just like Stack Overflow does, or at least use a button (`<button></button>`) with a background-image. It's more semantic.

brianpeiris 2009-10-04 12:12:11

Answer 2

+3 A:

IE8 doesn't like empty divs. Putting a blank <img/> with a transparent pixel inside the div seems to fix it.

Demo: http://jsbin.com/asiju (Editable via http://jsbin.com/asiju/edit)

HTML source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
    <title>CSS IE 8 cursor test</title>
    <style type="text/css" media="screen">
      .icon-button { float: left; cursor: pointer; }
      .ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); }
      .dummy-image { width: 15px; height: 10px; vertical-align: top; border: none; }
    </style>
  </head>
  <body>
    <div class="icon-button ui-icon"><img class="dummy-image" src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAQAICVAEAOw=="/></div>
    <div>Sample Text</div>
  </body>
</html>

brianpeiris 2009-10-04 11:53:10

Great! I have applied it, seems to be fixed. But did you notice that border of IMG actually doesn't disappear on IE8?

Andrey Tkach 2009-10-04 13:37:38

You're right. I've edited my answer to include a 1x1 transparent pixel in the image tag. That gets rid of the border: http://jsbin.com/asiju

brianpeiris 2009-10-04 14:39:58

ugh, what a nasty hack. doesn't overflow: auto do the trick?

Litso 2009-12-09 16:00:39

Answer 3

A:

How about

<a href="whatever.php"><div class="BG IMAGE" style="cursor:The one you want;></div></a> I use it myself and it works fine.

Nothing 2009-12-09 15:41:49

you can't put a div inside an a

Litso 2009-12-09 16:03:22

yep. Agree with a timhessel - it's bad semantic.

Andrey Tkach 2009-12-10 12:13:04

ansaurus

tags:

views:

answers:

IE 8 div and css cursor

related questions