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

Answer 1

A few notes:

1.) Do you have a DOCTYPE set? if not you will be in Quirks Mode which alters the way IE renders things. Adding the DOCTYPE will force IE to render in a "more" standards like way.

2.) Do try adding the 'px'; suffix when setting the top/left. There are known issues (I believe with Firefox) that in some cases not specifying the units causes odd behavior.

3.) Verify e.g. even with an alert() that the x, and y values in IE are what you are expecting.

var x = ...;
var y = ...;
alert('x:' + x + ', y:' + y);

With some answers to the above 3 items, we should be able to provide more info/solve the problem.

Answer 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 http://stackoverflow.com/questions/281443/inconsistent-whitespace-text-nodes-in-internet-explorer/#311923

Secondly, see @scunliffe's answer.