ScrollTop Issue in Firefox

[Velhari]

Hi all,

I was showing the popup while hovering over an element under overflow div. so i am getting top and left of current hovering element to display popup with that top and left position.
In IE it positioned exactly where i was hovering, But in firefox it was misplaced under the overflow div[Not exactly what position i hovered]

My sample code

<div id="overflowdiv" style="overflow:scroll;height:100;width:100">
    <ul style="list-style-type:none">
        <li><a href="javascript:void(0);" onMouseOver="getScrollTop(this)">Test Element 1</a></li>
        <li><a href="javascript:void(0);" onMouseOver="getScrollTop(this)">Test Element 2</a></li>
        <li><a href="javascript:void(0);" onMouseOver="getScrollTop(this)">Test Element 3</a></li>
        <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 4</a></li>
        <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 5</a></li>
        <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 6</a></li>
        <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 7</a></li>
        <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 8</a></li>
        <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 9</a></li>
        <li><a href="javascript:void(0);" onMouseOver="getScrollTop(this)">Test Element 10</a></li>
        <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 11</a></li>
        <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 12</a></li>
        <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 13</a></li>
        <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 14</a></li>
        <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 15</a></li>
        <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 16</a></li>
    </ul>
</div>
<div id="showdiv" style="left:-100;top:-100;position:absolute;background-color:#FFFF00;color:#000000">Please help me to resolve this issue</div>
<script language="javascript">
    function getScrollTop( element ){
        var l = t = 0;        
        while( element != null ) {
            l += element.offsetLeft;
            t += element.offsetTop;                        
            if ( element.nodeName != 'BODY' ){                 
                l -= element.scrollLeft;
                t -= element.scrollTop;
            }
            element = element.offsetParent;
        }
        document.getElementById('showdiv').style.left = l;
        document.getElementById('showdiv').style.top  = t;
    }
</script>
 
 

Please tell me what is the problem

[acoder]

When setting top/left, you need to add the units, e.g. "px".

[Velhari]

When setting top/left, you need to add the units, e.g. "px".

Thanks for your reply.

After applying this also, it shouldn't work at all.

[acoder]

Ah I see. There's no need to work out offsetLeft, etc. if all you want is the mouse position. See this link.