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

Marc Audet · Accepted Answer · 2013-04-01T19:22:22.567

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>

edited Apr 01 '13 at 19:22

answered Apr 01 '13 at 19:10

Marc Audet

46,011
11
63
83

Hi Marc, this didn't fix it in IE. – user1060187 Apr 01 '13 at 19:15
Let me double check, what version of IE are you using and what DOCTYPE? – Marc Audet Apr 01 '13 at 19:15
Give me a few minutes and I will build a quick fiddle to illustrate, might be helpful to others. – Marc Audet Apr 01 '13 at 19:16
Thanks Marc. It's IE9 and the DOCTYPE is >> PUBLIC XHTML 1.0 Transitional – user1060187 Apr 01 '13 at 19:18
I did not see the jQuery script, this is part of the issue. Please see comment. Do you want the page to scroll beneath the header/navbar elements? – Marc Audet Apr 01 '13 at 19:23
Yes, that sorted it Marc :) Many thanks. – user1060187 Apr 01 '13 at 19:25
Just be careful with IE, it treats the CSS box model a bit differently than most other browsers. Good luck! – Marc Audet Apr 01 '13 at 19:28

score 0 · Answer 2 · answered Apr 01 '13 at 19:08

You mention using sticky-footer but it doesn't look like you are using it. Here is the css that allows you to do it. (I just copy and pasted from the site)

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}

src: http://ryanfait.com/sticky-footer/

IE not showing footer and containe properly

2 Answers2