IE not showing footer and containe properly

Question

I am working on the following site: buzzspherefilms.site40.net and the footer is not showing as expected in IE. It works fine with Chrome and Mozilla but in IE, the footer is appearing at the bottom of the page. Can anyone see why? Also, any help on implementing this into a sticky footer would be great.

Thanks

Answer 1

The short answer is that you need to adjust the margin-top on #container.

In your layout, you have two fixed elements, header and navbar, with a combined height of 120px and 40px respectively.

If you set margin-top: 160px on container, the layout will work consistently across the browsers.

IE calculates the auto top margin differently than the other browsers, which can cause problems.

As for sticky-footers, there are articles on the web on how to do it, so that would be your first step.

jQuery Fix

You are trying to set the container height dynamically using jQuery. The cross-browser issue arises probably because .outerHeight does the math differently in IE.

Comment this out first (you can put it back in later) and try a simple CSS fix.

<script>
    $(document).ready(function() {
       $("#quickSearch").autocomplete({
       source: "quickSearch.php",
       minLength: 2
       });
          $('#container').css('marginTop', $('#header').outerHeight(true) + $('#navbar').outerHeight(true) );

    });
</script>