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.


css javascript ie