Simple footer troubles

Question

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>

Answer 1

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/

Answer 2

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