OffsetLeft and OffsetTop issue in IE

Question

Facing offsetLeft and offsetTop problem in IE while trying to create one tooltip which will create each time when we click on different events on calendar.. the following is the code which will work good for firefox but creating problem for IE. can tell me the solution for this..

var ttip = __createElement("div","ttipbox","ttipbox"); //creating div
target = document.getElementById("sDiv"+ndiv); //taking the object of event on click of it tooltip has to display.

var x = target.offsetLeft ;
var y = target.offsetTop - (currObj.childNodes[2].childNodes[0].childNodes[1].scrollTop + ttip.offsetHeight); 
ttip.style.top= y+15;
ttip.style.left= x - 80;
ttip.style.zIndex= "2000";

Thanks in advance

Solution 1

in IE should help:

var obj = target.getBoundingClientRect();
var left = obj.left;
var top = obj.top;

Solution 2

This is why you use a DOM library.

First potential problem I can see is the code

currObj.childNodes[2].childNodes[0].childNodes[1]

will only work in a cross-browser fashion if you have no "whitespace" in your DOM tree, since IE ignores html "whitespace" when populating the childNodes property while other do not:

<div id="mydiv">
    <span>Hello World</span>
</div>

IE will report mydiv.childNodes.length as 1 (<span>), everyone else 3 ("\n", <span>, "\n").

See Inconsistent Whitespace Text Nodes in Internet Explorer

Secondly, see @scunliffe's answer.