Simple footer troubles

I'm trying to make a footer for my page and I'm using the following CSS:

#footer {
    height: 100px;
    background-color: #F3F3F3;
    position: absolute;
    bottom: 0;
}

The footer appears at the bottom of the page as it should. I can see the text I write glued to the bottom of the page properly. However, the background colors refuse to appear at all. It's just the开发者_运维知识库 plain white background of the rest of the page.

Any idea why this is happening?

EDIT Checked for any conflicting/overriding CSS. Nothing that I can see.

EDIT2 The HTML

<div id="footer">
    <center><p> Sup dawg, I'm a footer </p></center>    
</div>

The css attribute to set the background color is background color. Change your css to:

#footer {
    height: 100px;
    background-color: #F3F3F3;
    position: absolute;
    bottom: 0;
}

Here is a working example: http://jsfiddle.net/gfKXU/1/

Did you mean background-color: #F3F3F3; instead?