This footer stays put in Chrome, how can I make it stay the same in Firefox

This footer stays put in Chrome, how can I rewrite the HTML or CSS to make it stay the same in Firefox?

http://goo.gl/rAbH6

Like, when I visit the page in Chrome and then zoom out, the footer stays at the bottom of the screen, but when I visit the same page in Firefox and try zooming out the footer won't s开发者_如何学JAVAtay in the right place.

You'll see what I mean if you try visiting the page.

Anyone knows?

Kind regards

Pongy

You're problem is right here with your code.

#footer {
    height:40px;
    position:absolute;
    overflow:hidden;
    background:url(images/bottombar.png) repeat-x 0 0;
    position:relative;
    margin-top:400px;
}

As you can see, you've told it to be absolute and relative, so you're duplicating code for no reason and margin-top with 400px; so no matter how much you zoom in or out, you've told it to remain explicitly in that position. Whereas you should have the following code:

#footer {
    height:40px;
    position:absolute;
    overflow:hidden;
    background:url(images/bottombar.png) repeat-x 0 0;
    top:100%;
    margin-top:-40px;
}

So now we're telling it to go from the top, down to the bottom of the page, with a height of 40px, so we're now displaying it outside of the document itself, so then we margin-top it back in to place, which is the 40px of height we assigned.#