LI.offset() and LI.position() give erratic results
NOTE: I posted this in the general forum...
http://groups.google.com/group/jquery-en/browse_thread/thread/c368a202fe911a9d?hl=en#
...but got no response, so am reposting here because it appears to be
an issue with core functionality...
I get erratic results when trying to get the position of a LI element.
Every browser gives different results - only IE7 seems to get it
right.
I have a navbar UL element nested a few levels deep within DIVs that
provide page structure. The UL is also nested within a SPAN (inline-
block) so the UL element can be centered within DIV#Nav1. A stripped-
down version of the HTML is shown at bottom.
The LI elements trigger a custom drop-down menu onHover. I use simple
math to calculate the positioning of the DIV that acts as a menu...
var
$LI = $(this) // LI element
, tabOffset = $LI.offset()
, menuTop = tabOffset.top + $LI.outerHeight()
, menuLeft = Math.floor(tabOffset.left)
;
In IE7, this works perfectly - exactly as you would expect. But every
other browser has one or more issues...
Internet Explorer 7
$LI.offset().left = CORRECT
$LI.offset().top = CORRECT
$LI.position().top = 0 - CORRECT
Chrome 3.0.195.21
$LI.offset().left = the Left-edge of the 'parent' UL element!
$LI.offset().top = CORRECT
$LI.position().top = 0 - CORRECT
FireFox 3.5
$LI.offset().left = the Right-edge of the 'parent' UL element
$LI.offset().top = too small by 15px
$LI.position().top = -15 -- wrong, the LI has NO top-margin
Opera 9.64
$LI.offset().left = the Right-edge of the 'parent' UL element
$LI.offset().top = CORRECT
$LI.position().top = -19, even though offset().top is correct
Only IE gets $LI.offset().left correct. Only IE and Chrome get
$LI.position().top right (0), but IE, Chrome and Opera all get
$LI.offset().top correct, even though Opera reports $LI.position().top
wrong (-19). Only FireFox gets everything wrong!
Can anyone shed any light on these discrepancies?
I will spend the time to create and post a test page if no one can
offer any clues, but I have not done so yet.
Thanks in advance.
/Kevin
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<DIV id="Layout-Header">
<DIV class="layout-header">
<DIV id="TopNavbar" class="navbar">
<DIV id="Nav1">
<SPAN class="center">
<UL class="tabs">
<LI><A href="/rentals">Rentals</A></LI>
<LI><A href="/linens">Linens</A></LI>
<LI><A href="/services">Services</A></LI>
<LI><A href="/planner">Planner</A></LI>
<LI><A href="/gallery">Gallery</A></LI>
<LI><A href="/community">Community</A></LI>
<LI><A href="/about">About Us</A></LI>
</UL>
</SPAN>
</DIV>
</DIV>
</DIV>
</DIV>