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

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

clientLeft / clientTop

IE provides two proprietary properties for every HTML element: clientLeft and clientTop

They are documented at MSDN: clientLeft, clientTop

They are defined as retrieving "the distance between the offsetLeft/Top property and the true left/top side of the client area." "The difference between the offsetLeft/Top and clientLeft/Top properties is the border of the object."

A TD's offsetLeft and offsetTop properties are calculated from the left and top sides of the TABLE element, inclusive of the table border, as in the illustration below:

A child element of the TD calculates its offsetLeft and offsetTop from the left and top sides of the TD element, exclusive of the TD border. The TD's border width, its clientLeft and clientTop need to be appended to any position calculations we make:

On the next page, we modify our functions to account for table cell borders.