Question

I have an absolutely-positioned DIV that I need to trap onclick events for. It turns out that, in IE7, the DIV seems to have no ‘footprint’ for things like clicking and even cursor. For example:

div {
      width: 200px; height: 200px;
      position: absolute;
      border: 10px solid black;
      cursor: pointer;
}

In IE7, that DIV has no ‘footprint’: it doesn’t react to onclick(), and its cursor doesn’t change to the pointer. Curiously, it DOES handle both those over its border – hence the large border in this example. Setting a background-color:

div { background-color: #fff; }

fixes the problem. But, in this case, that’s not possible – I need the DIV to have a transparent background.

I’ve come across this bug in the past, but I cannot for the life of me remember the IE hack to fix it.

Answer 1

Try using a transparent background image.

I would suggest using a 2×2 or bigger .gif that is all transparent pixels. Set it to repeat on x and y and IE shouldn’t have an issue with the clicks.

background: transparent url(path/to/spacer.gif) repeat left top;
/* Not all of that is necessary, but I have a tendency to define it anyway. */