DHTML Lab - DHTML Diner - Element Page Coordinates, Part 2 | 6 | WebReference

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


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

Nested <TABLE>s

 

On this page, our red square is placed within a nested table.

The outer table has a 5-pixel border specified. The inner one, a 1-pixel border as before.

Move the blue square.



  

   
   
  
   
   
   
<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=5 BORDERCOLOR=yellow>
<TR><TD WIDTH=20>&nbsp;</TD>
    <TD WIDTH=20>&nbsp;</TD><TD>&nbsp;</TD></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD>
    <TD>
        <TABLE CELLSPACING=0 CELLPADDING=0
               BORDER=1 BORDERCOLOR=#3AF600>
        <TR><TD WIDTH=20>&nbsp;</TD><TD WIDTH=20>&nbsp;
            </TD><TD>&nbsp;</TD></TR>
        <TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR>
        <TR>
            <TD>&nbsp;</TD><TD>&nbsp;</TD>
            <TD><IMG ID="redbox" SRC="redbox.gif"
                     WIDTH="200" HEIGHT="200"></TD>
        </TR>
        </TABLE>
    </TD>
</TR>
</TABLE>



Result

Our calculations are now off by two pixels!

The border around the outer table is 6 (six) pixels wide and the cell borders are two pixels wide.

Again, why does the rendering seemingly not correspond to what the HTML specifies?

How table borders are rendered is not immediately obvious, but we'll do our best to elaborate..

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Oct 07, 2002
Revised: Oct 07, 2002

URL: https://www.webreference.com/dhtml/diner/realpos2/5.html


Justtechjobs.comFind a programming school near you






Online Campus Both