DHTML Lab - DHTML Diner - Element Page Coordinates, Part 3 | 5 | WebReference

DHTML Lab - DHTML Diner - Element Page Coordinates, Part 3 | 5


Determining Element Page Coordinates, Part 3
NS6+, Mozilla 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



NS6 rendering

Right on the money again, for NS6 and Mozilla up to 0.9.6.



NS7 rendering

Our positioning is off by six pixels in NS7 and Mozilla 0.9.7+.

Unlike the tests we did in Part 2 with IE (where we were off by two pixels) the Gecko behavior is clearly related to the value of the BORDER attribute. But why do we see this behavior only in recent browser versions?



Produced by Peter Belesis and

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

URL: http://www.webreference.com/dhtml/diner/realpos3/5.html


Justtechjobs.comFind a programming school near you






Online Campus Both