When I was building an experimental site, I came across a new mind-boggling Internet Explorer issue. I've tested it on IE 7 and 8 (with Compatibility-View disabled) with XHTML strict.

What I wanted to achieve, is to have a floating div element with a background image and two input (type=text) fields on top. Also, I made the background of the two input fields transparent (background-color:transparent), so that the background image of the floating div would show through the fields.
So far, so good. At least... until I needed to trap the onmousedown event on the floating div element!

What I noticed, is that when the floating div is positioned over an image (or another input field), the onmousedown event isn't registered on the floating div, but only on the image below it!

Please consider the following example...

<div> <!-- placeholder -->
  <img src="http://www.rednael.com/images/banner_rednael.png" onmousedown="alert('image');" />
 
  <div style="position:absolute; top:23px; left:21px; padding:4px; background-image:url('http://www.rednael.com/images/terra_clouds.png');" onmousedown="alert('floating div');" >
    <input type="text" style="border:1px solid black;" onmousedown="alert('input 1');" />
    <br /><br />
    <input type="text" style="border:1px solid black; background-color:transparent;" onmousedown="alert('input 2');" />
  </div>
</div>

Try it: transp_input_exmpl1.htm (.98 KB)  [please make sure Compatibility-View is disabled]

When you click on the upper text field, you'll see that the event is registered on the input element and on the floating div element. But when you click on the lower text field, you'll see that this time the event is only registered on the img element below the floating div.
If you have good eyes, you may want to try to click on the border... Amazingly, the event is registered on the input element and on the floating div element.

Now please also consider the following example...

<div> <!-- placeholder -->
  <img src="http://www.rednael.com/images/banner_rednael.png" onmousedown="alert('image');" />
 
  <div style="position:absolute; top:23px; left:21px; padding:4px; background-image:url('http://www.rednael.com/images/terra_clouds.png');" onmousedown="alert('floating div');" >
    <input type="text" style="border:1px solid black;" onmousedown="alert('input 1');" />
    <br /><br />
    <div style="background-color:#a0a0ff;" onmousedown="alert('encapsulating div');" >
      <input type="text" style="border:1px solid black; background-color:transparent; " value="some text" onmousedown="alert('input 2');" />
    </div>
  </div>
</div>

Try it: transp_input_exmpl2.htm (1.1 KB)  [please make sure Compatibility-View is disabled]

In this example I've added an additional div element around the transparent input field and put some text into the field.

Now let's try the following. Click on the empty part of the lower text field. You'll see that the event is still only registered on the image. But when you click on the text in the text field, the event is registered on the input element, the encapsulating div element and the floating div element.

This leads me to the conclusion that...
  IE does not register mouse events on transparent parts of an input element.
 
This may be argued as being a feature instead of a bug. But, another conclusion is that...
  When a mouse event is not registered on a transparent input or textarea element, it's also not registered on any element below, until it reaches (bubbles up to) an img element, another input element (with text, or face) or a textarea element.

This last conclusion cannot be argued as beeing a feature, but is most definitely a bug, as the div elements (with and without background colors and images) also do not register the events.
Other browsers, like Firefox do not have this bug.

BUT... do not despair. I also found a solution!

Just add the following to the style of the transparent input field
  background-image:url('.');

Please try it out...

<div> <!-- placeholder -->
  <img src="http://www.rednael.com/images/banner_rednael.png" onmousedown="alert('image');" />
 
  <div style="position:absolute; top:23px; left:21px; padding:4px; background-image:url('http://www.rednael.com/images/terra_clouds.png');" onmousedown="alert('floating div');" >
    <input type="text" style="border:1px solid black;" onmousedown="alert('input 1');" />
    <br /><br />
    <div style="background-color:#a0a0ff;" onmousedown="alert('encapsulating div');" >
      <input type="text" style="border:1px solid black; background-color:transparent; background-image:url('.');" value="some text" onmousedown="alert('input 2');" />
    </div>
  </div>
</div>

Try it: transp_input_exmpl3.htm (1.13 KB)  [please make sure Compatibility-View is disabled]

This tries to add the current page as an image to the background of the input field. Though it cannot successfully load the background image, the input field behaves as if it could. With the background image in place, the events are registered on the input and textarea elements again. And also the elements beneath them register the events as normal!

I also tested this hack on Firefox and, although Firefox doesn't have this bug, this hack works successfully without weird side-effects. So, most probably, other browsers won't mind the hack too. But if you want to be really sure that it works throughout all different browsers, load a fully transparent image (gif or png). The transparent image can have the size of just 1 by 1 pixel, as the background is repeated (by default).