DHTML Lab - DHTML Diner - Element Page Coordinates, Part 2 | 4

Determining Element Page Coordinates, Part 2
IE for Windows and TABLEs

<TABLE BORDER=0>

Just below you should see a blue square. It is a solid-color positioned image element.

Below the blue square are two buttons. As labelled, one causes the blue square to be repositioned. The other brings the square back to its original position.

Below the buttons is a red square. It, too, is a solid-color element, but it is static and nested in a table. To the right is displayed the table HTML for your reference.

The purpose of our exercise is to determine the page position of the red square, using the current functions, and reposition the blue square on top of it using the values returned from the functions.

Behind the scenes, the code looks something like this:

BlueSquareReference.style.left = DL_GetElementLeft(RedSquareReference) + "px";
BlueSquareReference.style.top = DL_GetElementTop(RedSquareReference) + "px";

All of the examples in this article will follow the same guidelines.

Now, position the blue square by clicking on the large button.

Disabled  Disabled

<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0> <TR> <TD WIDTH=100>&nbsp;</TD> <TD><IMG ID="redbox" SRC="redbox.gif" WIDTH="200" HEIGHT="200"></TD> </TR> </TABLE>

Result

All versions of IE positioned the square correctly using our functions. But only because we had specified a value of 0 for the table's BORDER attribute.

If we specify a BORDER value other than 0, the results would be different.