IE7 not firing onmouseover event properly on element with padding

Posted by Dan on Aug 25, 2008 @ 12:21 PM

I ran into a really weird bug this morning. I was having an issue with a jQuery plug-in I wrote, where for some reason IE7 was not triggering the onmouseover event properly. After spending a bunch of time trying to track down the problem, I finally realized that it wasn't triggering the event until it got inside the padding of the element—which is the wrong behavior.

I whipped up a quick test case of a <div> with onmouseevent and some padding, but that worked as expected (with the event firing as soon as it reached the padding of the element.) As I started to debug the problem, I added a background color to the root element in order to see if I could tell when the even actually fired. However, as soon as I added the background-color, the event started firing correctly.

I'm not exactly sure what combination of HTML/CSS is causing the problem. I've been trying to to put together a straightforward example that illustrates the problem, but I've yet to be able to recreate without really complex code.

I believe the problem is related to having an absolutely positioned parent element with relatively positioned children and then moving the parent item's position in the DOM. Even stranger was that if I hide the entire content and would re-show it, everything would work properly.

It sounds like it's a pretty obscure buried bug, but if you're ever having problems getting an event to fire properly in IE7, try defining a background-color for the element to see if that fixes the problem.

Categories: HTML/ColdFusion, jQuery

8 Comments

  • Ben Nadel's Gravatar
    Ben Nadel
    Ugg, I hate that problem. Actually, I hate all problems where adding a background color fixes the problem :) Which, if I can remember, is actually several issues. Sometimes, I find that adding:

    zoom: 1

    ... to my CSS fixes random IE issues without negatively affecting the display in any way.
  • Ron's Gravatar
    Ron
    had the same problem, background-color made it work however not an option as i needed transparency, so solution for me was to add a transparent (1x1 pixel) gif as a background-image. good luck all.
  • Eamonn McGonigle's Gravatar
    Eamonn McGonigle
    Hi,

    I ran into a similar problem, I think. I was trying to get a left-hand navigation bar working but the slide-out menus behaved erratically in IE7. The solution was to set a background colour on the LI elements of the pop-out menus. Curiously, setting the colour on the A elements which were contained within the LI records didn't work.

    I am so sick of working around IE bugs/quirks/strangeness. It seems that about half of every HTML/CSS/Javascript book you read is taken up with narrative explaining what features don't work properly/at all in IE and presenting mechanisms (sometimes very esoteric) for getting around these limitations. We can only hope that IE8 is a major improvement.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Eamonn:

    I used to be a huge fan of IE. Back in the late 90s and very early this decade, it was a much easier browser to work with than Netscape 4 and I was able to build DHTML interfaces way more advanced than I could dream with NS4.

    However, ever since I started using Firebird (what is now Firefox) I've slowly begun to despise IE. 95% of all the CSS workarounds I have to implement are because of IE. Most of my time developing DHTML code is wrapped around tweaking things to work correctly in IE.

    The world will be a much better place when IE either gets up to snuff or goes away. It's amazing how many unintuitive hacks fix issues in IE. I mean why should a background color resolve padding issues?
  • ege's Gravatar
    ege
    Thanks Ron, you saved my life.
  • Hans's Gravatar
    Hans
    Hey,
    at first i want to thank you the solution with the background-color or background-image. I had this problem within a table column in IE7. The issue was the "position:relative" for the <tr>. With "position:relative" IE7 gives you the row of the table as source-element of the event, which the <td> contains, as long as the cursor is over the blank space of the column. But if you move your cursor over the text, the source-element is the column and no longer the row.

    Here's some example code. If you remove style="position:relative;" from the <tr> (or you add a background-color to the <td>'s), IE7 behaves like Firefox (from which i assume it works correctly...):

    <html>
    <body onload="init();">
     <script type="text/javascript">
      function init()
      {
      document.getElementById("Row1").onmouseover = react;
      }
      function react(e)
      {
      document.getElementById("Info").removeChild(document.getElementById("Info").firstChild);
      if(e)
      {
       document.getElementById("Info").appendChild(document.createTextNode(e.target.id));
      }
      else
      {
       document.getElementById("Info").appendChild(document.createTextNode(window.event.srcElement.id));
      }
      }
     </script>
     <table cellpadding="0" cellspacing="0">
      <tbody>
      <tr id="Row1" style="position:relative;">
       <td id="Column1" style="height:30px;width:100px;border-width:1px;border-style:solid;">
        Foo
       </td>
       <td id="Column2" style="height:30px;width:100px;border-width:1px;border-style:solid;">
        bar
       </td>
      </tr>
      </tbody>
     </table>
     <div id="Info">...</div>
    </body>
    </html>
  • Chris's Gravatar
    Chris
    This worked so well. Thank you so much!
  • Olivier's Gravatar
    Olivier
    Thanks Ron. Adding a transparent gif saved my night !
    I can go to sleep now...

Comments for this entry have been disabled.