Sticky footer (jQuery) won't align to bottom of page exactly
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][1] 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>


  [1]: http://www.directsponsor.org

My question:
===

What's causing the footer to sink below the bottom of the page?
Sticky footer (jQuery) won't align to bottom of page exactly
===

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][1] 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>


  [1]: http://www.directsponsor.org

My question:
===

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