Question

i have made a css sticky footer menu which is working great apart from when you Inspect Element with FF, the footer menu jumps up about 100px. So when the Firebug window is visible the menu is floating halfway up the page!?

I have set body and the html to height 100% and also i have a container div which has height 100% aswell…Any ideas?

EDIT: I have just tried setting the container div to overflow: auto. The menu no longer float halfway up the page but i have vertical scrollbars??

Relevant CSS:

#menu {
width: 960px;
height: 100px;
position: absolute;
bottom: 0px;
background-color: rgba(65, 64, 64, 0.75);
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

Answer 1

Cross browser CSS sticky footers are impossible to do with a single rule. I would hazard a bet this will not work in IE. For a rock solid css sticky footer implement take a look here