Oct 4, 2007

Problem with offsetTop and element position location in IE

This is just a small note for someone looking into a similar problem.

I was implementing keyboard navigation with explicit scrolling using scrollTo method, and found out that in IE I cannot get correct values for element position on the page. I use Prototype and it's Position.cumulativeOffset method (which, in turn, uses offetTop/offsetParent properties of the element). Position calculation worked fine in FF, Safari and Opera, but sometimes failed in IE.

The DOM tree I was operating with consisted of several nested UL, LI, SPAN elements (SPAN inside LI).

I added some debug code and found out, that SPAN elements sometimes got huge offset relative to LI, though it should be simply 0 (FF showed value of -1).

The solution to the problem was to add position:relative style to the SPAN, after that the problem disappears.

Unfortunately, I was unable to reproduce the problem with a simple test case to give the example here.



12 comments:

Raphael said...

Nice, thanks, that helped me a lot (I had a similar problem in IE).

Anonymous said...

It's working for me too. Thanks!

Mark said...

Solved a big headache for me too! thanks

jgroveuk said...

Thank you! After much fruitless googling this finally sorted a problem I was having with IE6. I had to add some dummy 'position:relative' style to some TD elements in order to get things to work correctly.

Girish Kumar said...

Thanks a lot man it is working

Anonymous said...

Yes, it helped. Thanks.

Anonymous said...

Great tip.
Reason 923 to not use Internet Exploder.

maca` said...

Working for me too!
IE has many bugs - no surprise there.

Anonymous said...

function findPosition( oElement, RequiredCoordinate ) {
//if XY returns o/p asarray obj else as string
requestedCo="XY";
if( RequiredCoordinate ){
if( RequiredCoordinate=="X" ) requestedCo="X";
else if( RequiredCoordinate=="Y" ) requestedCo="Y";
else requestedCo="XY";
}else requestedCo="XY";

if( typeof( oElement.offsetParent ) != 'undefined' ) {
for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent ) {
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}

if( requestedCo=="X" ) return(posX);
else if( requestedCo=="Y" ) return(posY);
else return [ posX, posY ];


} else {
if( requestedCo=="X" ) return(oElement.x);
else if( requestedCo=="Y" ) return(oElement.y);
else return [ oElement.x, oElement.y ];
}
}

Robin said...

Thank you so much friend..
It saved a lot of time for me..

mcnute said...

Thank you so much. Now the site of my wife is really a full reference. IE was making trouble with smoothscroll with jquery and now i played around with the position attribute of a td's class and it worked, but in my case i switched it to position:inherit;. I have a table with a limited height so it is scrollable. in order to jump within the content i passed id to the anchors and applied jquery to it. I used the script on this blog

Anonymous said...

This is a neat forceful work-around:

(parseInt(object.style.top.match(/-*\d+/)[0]) + yourPxNumber);