html footer moves to right when table is empty?

Question

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;
}  

Answer 1

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>

Answer 2

Start by validating your code. You are mixing HTML and XHTML code, and your tag structure is broken, so there will be some things to fix.

You will probably get more error messages than there are actual errors, so just start at the top and fix things as far as you clearly see the error, then revalidate to see what's left.

Answer 3

I don't think the:

html>body 

before the footer statement. It is unnecessary for what you are trying to accomplish and may be causing an issue.