• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 931
  • Last Modified:

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?
0
brgivens
Asked:
brgivens
  • 5
1 Solution
 
COBOLdinosaurCommented:
It is likely that you need to add style="margin:0px" to the div.  IE stick default margins on most elements.

Cd&
0
 
lil_puffballCommented:
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>
0
 
lil_puffballCommented:
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");
}
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
lil_puffballCommented:
Or if you prefer to not specify the body margin:

<!--THIS SPAN IS ONLY USED TO FIND THE BODY MARGIN-->
<span id=getMargin>&nbsp;</span>

<script>
function test(){
  var obj=document.all?document.all("getMargin"):document.getElementById("getMargin");
  document.getElementById("block").style.left = offsetLeft(document.getElementById("cell1"))-(document.all?obj.offsetLeft:0);
  //NOW REMOVE THE SPAN
  obj.parentNode.removeChild(obj);
  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>
0
 
lil_puffballCommented:
brgivens, thanks for the points, but is there a reason for the B?
0
 
lil_puffballCommented:
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.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now