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.