Added a Facebook badge, throwing off footer placement

Question

Added the for the facebook badge to the site and now it's thrown my placement for the footer off .. it's working fine in Chrome, but IE, FFox and Opera all experiencing problems...

Here is a screenshot:

The footer (brown bar) is supposed to be at the bottom...

Here is the CSS :

    /* footer */
#footer{
    background:url(../images/bg-footer.png) no-repeat;
    height:26px;
    overflow:hidden;
    padding:35px 0 0 55px;
    font-size:11px;
}
#footer p{
    margin:0;
    display:inline;
    color:#766623;
}
#footer ul{
    margin:0;
    padding:0;
    list-style:none;
    display:inline;
}
#footer li{
    display:inline;
    background:url(../images/sep-f-nav.gif) no-repeat 100% 55%;
    padding:0 6px 0 0;
    position:relative;
}
* html #footer li{
    padding:0 3px 0 3px;
}
*+html #footer li{
    padding:0 3px 0 3px;
}
#footer a{
    color:#30481f;
    text-decoration:none;
}
#footer a:hover{
    text-decoration:underline;

/*Facebook badge Holder*/
.fb-area{
    width:287px;
    padding:0 0;
    margin:0 0;
    min-height:100%;
}

Answer 1

This is a shot in the dark, because I always trial-and-error CSS design.

It looks to me like you have a float somewhere in your design. Have you tried doing a clear: both; on your footer's CSS? I don't see any floats in your provided CSS, but the Facebook badge very well might be adding one behind-the-scenes and the symptoms look about right.