| <html> |
| <HEAD> |
| <STYLE TYPE="text/css"> |
| <!-- |
| a:hover {color: red;} |
| --> |
| </STYLE> |
| </head> |
| <body> |
| |
| <table border=1 width=653> |
| <tr> |
| <td colspan=6 width=653> |
| <table border=1 width=620> |
| <tr> |
| <td width=620 height=4> foo </td> |
| </tr> |
| <tr> |
| <td valign=top> |
| <table border=1 width=39> |
| <tr> |
| <td width=39 height=47 valign=top> bar </tD> |
| <td valign=middle align=center> baz </tD> |
| </tr> |
| <tr> |
| <td width=5 valign=top> faz </td> |
| <td valign=top> |
| <table border=1 width=581> |
| <TR> |
| <td colspan=2 width=581> |
| <table border=1 width=581 border=0> |
| <tr> |
| <td valign=top align=left width=120> frip </td> |
| <td align=center valign=top width=480> |
| Feel free to browse ... |
| <P> |
| <CENTER> |
| <TABLE BORDER=1 WIDTH="273"> |
| <TR> |
| <TD><a href="">Holiday</A></TD> |
| <TD><a href="">Cars</A></TD> |
| </TR> |
| <TR> |
| <TD><a href="">Sports</A></TD> |
| <TD><a href="">Animals</A></TD> |
| </TR> |
| <TR> |
| <TD><a href="">Computers</A></TD> |
| <TD><a href="">Cartoons</A></TD> |
| </TR> |
| </TABLE> |
| </CENTER> |
| </td> |
| </tr> |
| </TABLE> |
| </td> |
| </tr> |
| </TABLE> |
| </td> |
| </tr> |
| </TABLE> |
| </td> |
| </tr> |
| </TABLE> |
| </td> |
| </tr> |
| </TABLE> |
| <BR> |
| |
| <p>The second (nested) table below has fixed widths 300px, 500px, 200px (outer to inner).<br> |
| When the <code>a:hover</code> for 'Holiday' gets <code>'onMouseOver'</code>, |
| the outer table reflows to 300px,<br> |
| clipping the middle (500px) table in the process.</p> |
| |
| <table border=1 width=300> |
| <TR> |
| <td> |
| 300px wide for comparison |
| </td> |
| </tr> |
| </TABLE> |
| |
| <br> |
| |
| <table border=1 width=300> |
| <TR> |
| <td> |
| <table border=1 width=500> |
| <tr> |
| <td> |
| <TABLE BORDER=1 WIDTH=200> |
| <TR> |
| <TD><a href="">Holiday</A></TD> |
| </TR> |
| </TABLE> |
| </td> |
| </tr> |
| </TABLE> |
| </td> |
| </tr> |
| </TABLE> |
| </body></html> |
