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>