Have a table of data surrounded by form tags. At the bottom of the page have a footer that is fixed.
When the table is empty (only table header displaying) the entire footer shifts half way off the screen, to the right.
Any ideas?
<form action='/cgi-bin/Lib.exe' method=POST name='dd' ID='Form1'> <div id='yyy'> <table cellspacing='0' ID='Table1'> <thead> <tr> <th>Start</th> <th>End</th> </tr> </thead> <p><small><font face='Arial'><small>$DATA</small></font></small></p> <tbody> <tr> <td><input type=radio name='begin' value='$START' ID='Radio0'> $START</td> <td>$END <input type=radio name='end' value='$END' ID='Radio3'></td> </tr> <tr> <td><input type=radio name='begin' value='$START' ID='Radio1'> $START</td> <td>$END <input type=radio name='end' value='$END' ID='Radio4'></td> </tr> <tr> <td><input type=radio name='begin' value='$START' ID='Radio2'> $START</td> <td>$END <input type=radio name='end' value='$END' ID='Radio5'></td> </tr> </tbody> </table> </div> <p><small><font face='Arial'><small>$DATA</small><strong></p> </strong></font></small> </form> <div id='footer'> <div id='labfooter'> </div> </div> The CSS:
#footer { width:100%; height:5em; } html>body #footer { position:fixed; bottom:0; z-index:10; /* Prevent certain problems with form controls */ } #header, #footer { color:#111; background:#ddd; text-align:center; }
It’s hard to debug without having more of your code. Also which browser(s) and OS you are having the problems with?
But, I can say that your html code is not valid, and that can throw off many browser renderings. Sometimes it may look like it runs well, but the DOM can be thrown way off from improper code.
For start try removing the
<p>...</p>in between the<thead>and<tbody>