CODEWITHSUNDEEP
cssfirefoxsticky-footer
Nowned
Nowned

Reputation: 105

Sticky Footer Not Working in Firefox

We've got a sticky footer that is working great in anything WebKit based but doesn't seem to work in Firefox (Or new versions of IE either).

There is extra space being generated below the footer of around 200px in height that is inheriting the background colour of body.

The extra space does not seem to be part of any div that we can find, including html, body, content, wrapper etc. etc. It also does not seem to be caused by any sort of padding or margins on any elements.

We've built it on Ryan Fait's CSS Sticky Footer method that uses a push div inside of the wrapper div, with a separate footer div.

You can check it out at redesign.treepuncher.com/freetrial/

Upvotes: 1

Views: 2301

Answers (2)

JoeBobs
JoeBobs

Reputation: 764

Iframe at the bottom of your page and copyright is creating unnecessary space. You can stop iframe from being displayed if that does not affect your website's functionality. Try this code:

.copy {
    color: #FFFFFF;
    float: right;
    font-weight: 100 !important;
    margin: 95px 15px 0 15px; //Fixes margin at the bottom of this div
}

iframe {
    display: none; //Stops iframe from being displayed
}

Upvotes: 1

Vortex
Vortex

Reputation: 653

The following css should make it sticky and remove unnecessary space at bottom

.footer {
    background-color: #006837;
    bottom: 0;
    color: #FFFFFF;
    font-family: "roboto",sans-serif;
    font-size: 12px;
    font-weight: 100;
    height: 120px;
    position: fixed;
    width: 100%;
}
.wrapper {
    height: auto !important;
    margin: 0 auto;
    min-height: 100%;
}

Upvotes: 0

Related Questions