Sticky footer (jQuery) won't align to bottom of page exactly

Question

The problem:

I'm using jQuery to align my footer to the bottom of a page. It works in FF but IE, Chrome and Safari push the footer down by about 50-100px.

See for yourself:

Look at the footer of www.directsponsor.org to see a live example of the problem.

The code:

<script type="text/javascript">

    jQuery.noConflict();

    jQuery(document).ready(function($){
        matchHeight();
    function matchHeight() {
        var mainHeight = $("#wrapper").outerHeight() - $("#header").outerHeight() - $("#leader").outerHeight() - $("#footer").outerHeight() - parseInt($("#footer").css("margin-top")) - 1 - parseInt($("#main").css("padding-top"))- parseInt($("#main").css("padding-bottom"));
        var mainReal = $("#main").outerHeight(true);

        if ((mainHeight + 1 + parseInt($("#main").css("padding-top")) + parseInt($("#main").css("padding-bottom"))) > mainReal) {
            $('#main').height(mainHeight);
        }
    }
    $(window).resize(matchHeight);
});

</script>

My question:

What's causing the footer to sink below the bottom of the page?

Answer 1

try this : http://www.codicode.com/art/the_best_sticky_footer.aspx this code also uses jQuery and works perfectly on all browsers.

hope this helps.