Jquery reporting wrong x/y positions

Jquery reporting wrong x/y positions

I've updated this post to include a much simpler example.

Problem:

The pageX and pageY properties of the mouse event is incorrect for elements inside a <div> which is inside a <td>, but ONLY when the <div> has its css position property set to "absolute", "relative", or "fixed".

This is while using jquery 1.4.2.

  1. <html>
  2. <head></head>
  3. <body>
  4. <table>
  5.   <tr>
  6.     <td width="100">stuff</td>
  7.    <td>

  8.       <!-- if style is removed from this div, the problem goes away -->
  9.      <div id="tabs2" style="position:relative">
  10.         <a href="#" id="trigger">Trigger 1</a>   <!-- trigger for popup -->
  11.         <div id="popup" style="display:none;position:absolute;border:2px solid #62BBE8;background-color:#ffffff;padding:2px;width:350px;">
  12.           mouseover 1
  13.         </div> <!-- close popup div -->
  14.       </div> <!-- close div w/ position specified -->
  15.     </td>
  16.   </tr>
  17. </table>

  18. <!-- I know it says 1.4, but it's really 1.4.2 -->
  19. <script type="text/javascript" src="../../../js/jquery/1.4/jquery.js"></script>

  20. <script type="text/javascript">
  21. $(document).ready(function() {
  22.   $("#trigger").mousemove(function(e) {
  23.     var popup = $('#popup');  // grab the popup
  24.     popup.show();             // show the popup
  25.     popup.css({               // set top/left according to pageY/pageX
  26.       top: e.pageY + 10,
  27.       left: e.pageX + 10
  28.     }).mouseout(function() {
  29.       popup.hide();           // hide the popup
  30.     });
  31.   });
  32. });
  33. </script>

  34. </body>
  35. </html>

When the above code is implemented, notice the misplaced popup.  If the "position" style is removed, this problem goes away.

Note, the attachment is now obsolete in favor of the above code... but the editor doesn't seem to want me to remove it