random thoughts, formed in the twisted mind of a coder... RSS 2.0
# Tuesday, 01 September 2009

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

 

Tuesday, 01 September 2009 15:53:37 (W. Europe Daylight Time, UTC+02:00)  #    Comments [7]
Script and HTML
Wednesday, 02 September 2009 12:55:18 (W. Europe Daylight Time, UTC+02:00)
Nicely found and nicely solved!

I can imagine that you can use a one pixel transparent gif image as the background URL to make this necessary hack just a bit more neat. But you don't see Firefox complain about this solution so I guess there's no problem :)
Friday, 09 October 2009 18:54:41 (W. Europe Daylight Time, UTC+02:00)
Works great. Thanks for sharing!
Monday, 07 December 2009 12:39:13 (W. Europe Standard Time, UTC+01:00)
Compliments. Helped me. Thanks for taking the trouble to share.
Martijn
Thursday, 04 February 2010 00:13:42 (W. Europe Standard Time, UTC+01:00)
Thanks for sharing. I was pulling my hair out on this one!
Trey
Saturday, 06 March 2010 23:23:37 (W. Europe Standard Time, UTC+01:00)
nice one old chap, much appreciated
Thursday, 20 May 2010 02:40:06 (W. Europe Daylight Time, UTC+02:00)
Thanks! This one helped me out too.
Scott Trenda
Tuesday, 21 September 2010 00:35:41 (W. Europe Daylight Time, UTC+02:00)
This solution works great to fix the hover bug in IE 7 to allow my jquery drop downs to work properly. Thanks very much for posting this!
All comments require the approval of the site owner before being displayed.
Name
E-mail
Home page

Comment (HTML not allowed)  

Enter the code shown (prevents robots):

Live Comment Preview
About the author/Disclaimer

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

© Copyright 2017
Martijn Thie
Sign In
Statistics
Total Posts: 18
This Year: 0
This Month: 0
This Week: 0
Comments: 176
All Content © 2017, Martijn Thie
DasBlog theme adapted from 'Business' (originally by delarou)