asked on

offsetLeft problem

Hi,

I'm having a problem calculating the actual position of an element within the body:

<script>
function test(){
document.getElementById("block").style.left = offsetLeft(document.getElementById("cell1"));
document.getElementById("block").style.top = offsetTop(document.getElementById("cell1"));
alert("Table offsetLeft = " + document.getElementById("table1").offsetLeft + "px");
}
function offsetLeft(o){var i=0;while(o.offsetParent!=null){i+=o.offsetLeft;o=o.offsetParent;}return i+o.offsetLeft;}
function offsetTop(o){var i=0;while(o.offsetParent!=null){i+=o.offsetTop;o=o.offsetParent;}return i+o.offsetTop;}
</script>
<body onload="test();">
<div style="position:relative">
<table id=table1 cellspacing=0 cellpadding=0>
<tr>
<td id=cell1 style="border:1px solid black"><input></td>
</tr>
</table>
</div>
<div id=block style="background:black;position:absolute;height:200;width:2" />
</body>

The black line should line up with the left side of the cell. It works fine in NN but not in IE. For some reason, IE thinks the table is offset 10px from div. I find it interesting that the same logic does work to determine the top position of the cell.

The problem does not occur if the div isn't relative, but this example is reduced from the original to illustrate the actual problem; the div must remain relative.

Can anyone figure out how to fix my offsetLeft function so that it returns the correct total offsetLeft value in IE?

COBOLdinosaur

It is likely that you need to add style="margin:0px" to the div. IE stick default margins on most elements.

Cd&

lil_puffball

You should give your body a margin:

<script>
function test(){
//NOTE THAT I SUBTRACTED THE BODY MARGIN BELOW
document.getElementById("block").style.left = offsetLeft(document.getElementById("cell1"))-parseInt(document.body.style.margin);
document.getElementById("block").style.top = offsetTop(document.getElementById("cell1"));
alert("Table offsetLeft = " + document.getElementById("table1").offsetLeft + "px");
}
function offsetLeft(o){var i=0;while(o.offsetParent!=null){i+=o.offsetLeft;o=o.offsetParent;}return i+o.offsetLeft;}
function offsetTop(o){var i=0;while(o.offsetParent!=null){i+=o.offsetTop;o=o.offsetParent;}return i+o.offsetTop;}
</script>
<body onload="test();" style="margin:10px;">
<div style="position:relative">
<table id=table1 cellspacing=0 cellpadding=0>
<tr>
<td id=cell1 style="border:1px solid black"><input></td>
</tr>
</table>
</div>
<div id=block style="background:black;position:absolute;height:200;width:2" />
</body>

lil_puffball

But then it doesn't work in Netscape, better do this:

function test(){
document.getElementById("block").style.left = offsetLeft(document.getElementById("cell1"))-(document.all?parseInt(document.body.style.margin):0);
document.getElementById("block").style.top = offsetTop(document.getElementById("cell1"));
alert("Table offsetLeft = " + document.getElementById("table1").offsetLeft + "px");
}

ASKER CERTIFIED SOLUTION

lil_puffball

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lil_puffball

brgivens, thanks for the points, but is there a reason for the B?

lil_puffball

If you were looking for an explanation, it is because in IE, with relatively positioned divs, the body margin is not taken into account. This is why I check how big the body margin is, and then add this amount to the other number.