I have the following code which is copied directly from other pages where it works.
</head>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 >
<table width="100%" height="100%" border="10">
<TR id="noprint"></td>
<TD height="10"valign="top"><IMG SRC="images/top_left_corner.gif" WIDTH=255 HEIGHT=140 ALT=""></TD>
<TD width="100%" valign="top" class="header"><!-- HORIZONTAL FILL BOX --> </TD>
<TD valign="top"><IMG SRC="images/top_right_corner.gif" WIDTH=46 HEIGHT=140 ALT=""></TD>
</TR>
<tr>
<td height="100%" id="noprint" class="menu"><!--#include file="navigation/vertical.asp" --></td>
<td colspan="2" width="100%" height="100%" valign="top" align="left">
<div id="main">
</div>
</td>
</tr>
</table>
</BODY>
</HTML>
The first <tr> places a logo (with a blue background) in the top left corner, a blue bar across the middle and a small blue end piece (rounded corners) on the right end. This works fine.
The second <tr> is where my problems start. The first <td> in that row is supposed to go to the bottom of the page with a blue bar similar to the one across the top and the included file places a menu on the verticle bar.
With this code, the second row doesn't show up at all. HOWEVER, if I change the table's border from 1 to 100 the table behaves as one would expect with a big fat border; the table gets smaller (the second row is still not showing), but the menu starts to appear in its correct position.
The second <td> in the second row has another table in it and the bottom of the main table is pulled up tight to the bottom of this table. If I place anything under this inner table, the bottom of the main table is pulled up tight under that.
I was under the impression that the height="100%" attribute was supposed to slam the bottom of the row down to the bottom of the page and keep it there. How can I correct this problem?
</head>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 >
<table width="100%" height="100%" border="10">
<TR id="noprint"></td>
<TD height="10"valign="top"><IMG SRC="images/top_left_corner.gif" WIDTH=255 HEIGHT=140 ALT=""></TD>
<TD width="100%" valign="top" class="header"><!-- HORIZONTAL FILL BOX --> </TD>
<TD valign="top"><IMG SRC="images/top_right_corner.gif" WIDTH=46 HEIGHT=140 ALT=""></TD>
</TR>
<tr>
<td height="100%" id="noprint" class="menu"><!--#include file="navigation/vertical.asp" --></td>
<td colspan="2" width="100%" height="100%" valign="top" align="left">
<div id="main">
</div>
</td>
</tr>
</table>
</BODY>
</HTML>
The first <tr> places a logo (with a blue background) in the top left corner, a blue bar across the middle and a small blue end piece (rounded corners) on the right end. This works fine.
The second <tr> is where my problems start. The first <td> in that row is supposed to go to the bottom of the page with a blue bar similar to the one across the top and the included file places a menu on the verticle bar.
With this code, the second row doesn't show up at all. HOWEVER, if I change the table's border from 1 to 100 the table behaves as one would expect with a big fat border; the table gets smaller (the second row is still not showing), but the menu starts to appear in its correct position.
The second <td> in the second row has another table in it and the bottom of the main table is pulled up tight to the bottom of this table. If I place anything under this inner table, the bottom of the main table is pulled up tight under that.
I was under the impression that the height="100%" attribute was supposed to slam the bottom of the row down to the bottom of the page and keep it there. How can I correct this problem?