Trouble with a sticky footer

1

I am working on a footer that locks to the bottom of the browser window or the bottom of the content, whichever of the two is larger. I used the work over at footerStickAlt (http://www.themaninblue.com/writing/perspective/2005/08/29/) as my template.

Now I am having a small minor detail problem and it is really bugging me so if someone can just look over my 50 lines of code, I’m sure you can tell me what I’m doing wrong.

The page in question is at http://www.amychance.com/footer-test.html

and the code in question is :


<head>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
    html
    {
        height: 100%;
    }
    
    body
    {
        height: 100%;
    }
    
    #nonFooter
    {
        position: relative;
        min-height: 100%;
    }
    
    * html #nonFooter
    {
        height: 100%;
    }
    
    #content
    {
        padding-bottom: 60px;
    }
    
    #footer
    {
        position: relative;
        margin: -50px auto 0 auto;
    }
    /* A CSS hack that only applies to IE -- specifies a different height for the footer */

    * html #footer
    {
        margin-top: -40px;
    }
</style>
</head>

<body>
    <div id="nonFooter">
        <div id="content" align="center">
           Non Footer Text
        </div>
    </div>
    <div id="footer" align="center">
        Footer
    </div>
</body>
</html>

Now my problem is that that even though it goes to where I want it, the scrollbars appear and the page allows for about a 5px scroll, no matter what the browser size.

Does anyone know why this is happening?