I am getting 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 gets $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>
