Absolute Positioning

[Kolja]

This simple piece of code doens't work on IE 6:

<!-- <code> -->
<table height=100%>
<tr><td>
<div id=orig>X</div>
</td></tr></table>

<div id=move style="position:absolute">Y</div>

<script>
move.style.top = orig.offsetTop
alert(orig.offsetTop)
alert(move.offsetTop)
</script>
<!-- </code> -->

The 'X' and thy 'Y' should be displayed overlapped. What's wrong?

[khalidali63]

There is a major error in the code above,Beginning IE6, IE has started supporting W3C standards, of which 1 is XHTML and DOM,
Now in the previous IE releases a person could use any attribute without qoutes around it,which is wrong, now all the IE developers have to change their this habit and have to enclose all the attributes within qoutes.
In the code above I have fixed the HTML part of it, take a look.

<table height="100%">
<tr><td>
<div id="orig">X</div>
</td></tr></table>

<div id="move" style="position:absolute;">Y</div>

:-)

btw Netscape developers don't have this problem,,,cus we are used to follow W3C standards more...

Khalid

[Kolja]

Thank you for your answers, but it doesn't work yet. I changed the code to this:

<!-- <code> -->
<table height="100%">
<tr><td>
<div id="orig">X</div>
</td></tr></table>

<div id="move" style="position:absolute;">Y</div>

<script>
var objOrig = document.getElementById("orig");
var objMove = document.getElementById("move");
objMove.style.top = objOrig.offsetTop;
</script>
<!-- </code> -->

[khalidali63]

just change this line
objMove.style.top = objOrig.offsetTop;

with the line below and it will work

objMove.style.top = objOrig.offsetTop+"px";

Njoy

Khalid

[khalidali63]

I'm afraid I have to disagree dave,
I always write my code first in NS6 browsers then in IE.

The code segment I pasted earlier does work with both IE5+ and NS 6+, and yes it overlaps both values X and Y

here is the code again

<table height="100%">
<tr><td>
<div id="orig">X</div>
</td></tr></table>

<div id="move" style="position:absolute;">Y</div>

<script>
var objOrig = document.getElementById("orig");
var objMove = document.getElementById("move");

objMove.style.top = objOrig.offsetTop+"px";
</script>

[Kolja]

First of all, thx for your answers. Please forgive me, if my postings are a little bit unadept. I'm not experienced in forum postings and as a German not very familiar with English.

I put the code online to: www.quasimedo.de/test.htm

The IE 6 still doesn't move the y precisely over the x. I think there could be a bug in IE 6, reading out the offsetTop property correctly from a div-layer in a table with heigth set to 100%. I'm not sure about this, but I a screenshot analyze indicates it.

Does anybody know alternatives to offsetTop?

[khalidali63]

Hello Dave,
Netscape is ignoring "px"
As you may know that NS6+ is the most standard compliant browser out there, there fore please take a look at the DOM Level 2 documentation,it prcisely says this
DOM level 2: element.style.left = value + "px";
DOM level 2: element.style.top = value + "px";
I hope this will end this discussion..

-:)

cheers
Khalid

[khalidali63]

Ok I have looked at the code you have on the net,here is whats wrong.
pleas replace your code

<div id="orig">X</div>

with this line

<div id="orig" style="position:absolute;">X</div>

and have fun...

:-)

Khalid

[Kolja]

Hi there, thanks a lot for your answers. :)

I replaced <div id="orig">X</div> with
<div id="orig" style="position:absolute;">X</div>
and both 'X' and 'Y' are displayed at the same position. Ve cool so far, but this position is not the correct vertical center of the table, so it's no solution for me.

To calculate the correct offsetTop, perhaps the offsetTop property of the 'X'-div parent element has to be added - but I'm tired of trying around, and I'll look for a different solution now.

Thank you Dave and khaligali for your cool hints and infos.