CSS Footer and all browsers

[kenroar]

I am having trouble with my footer showing up correctly in all browsers. Without being allowed to point you to the location, it will be difficult to give you a good picture of the problem. My footer is a jpg image and should be centered as the window fluctuates. Here is what I have for my HTML:

------------------------After the header:

<br class="clear" />
<div id="footer" />
<div>

------------------------Here is my CSS:

/* Footer */

#footer {
width: 960px;
min-width: 910px;
margin: -84px 0px 0px 0px;
_margin: 0px;
background: transparent url(../images/footer.png) bottom center no-repeat;
_background: none;
position: relative; /* Needed for Safari */
}

#footer div {
width: 1027px;
height: 60px;
margin: 0px auto;
padding-top: 40px;
color: #FFFFCC;
font-size: 12px;
}

#footer a {
color: #FFCC66;
font-size: 12px;
margin-right: 10px;
}

#footer_left {
margin-left: 0px;
}

#footer_right {
margin-left: 0px;
}

#footer_right a img {
margin-bottom: -15px;
}

[Marshall]

If your footer is not contained within a page container, then add this to the footer's outer container CSS:

margin: 0 auto;
padding: 0px;
text-align: left; /* Needed for IE*/

I don't understand, though, while your #footer div is wider than the #footer.

Marshall

[Xapti]

yeah I don't get this! you didn't explain why you have a div inside your footer... do you really need more than 1?
And like marshall said... why is the inside div wider than it's container?

Strange that you'd say position:relative is required for Safari. I don't know much about safari, but it doesn't make much sense to me that that would fix anything, unless safari (your your page) is extremely buggy.

Are you running a proper doctype at the top of your pages?

As Marshall said (just reiterating for clairifaction), The simplest way to center a block level item horizontally is to use margin:0 auto, which makes top and bottom margin 0, and the left and right AUTOmatically fit the remaining space. (Content cannot go on top of the margined space unless you use absolute positioning, but chances are you don't want that anyway)

[kenroar]

OK, I incorporated some of your suggestions. The footer now appears as it should for Safari, Firefox, and IE 7. Unfortunately, IE 6 still does not show the footer correctly. Here is what I have:

HTML ---------------

....
</script><!--[if lt IE 7.]>
<script defer type="text/javascript" src="css/pngfix.js"></script>
<![endif]--><!--Preload BG-->....

<style type="text/css">
body
{background-image: url("images/main_bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center}
</style>
</head> (For some reason, when I remove the style immediately above, it does not show up correctly.)

<br class="clear" />
<div id="footer" />

CSS ----------------

html, body {
margin: 0px;
padding: 0px;
}

body {
margin: 0px auto;
color: #FFCC66;
font-size: 11px;
font-family: "Arial", "Helvetica", "Verdana", sans-serif;
_background: #FFF url(../images/footer.jpg) bottom center no-repeat;
}

br.clear {
clear: both;
}

a img {
border: none;
}

img, div {
behavior: url(iepngfix.htc);
}

#container {
width: 100%;
/* background: transparent url(../images/body_bg.gif) top center repeat-x; */
background: transparent url(../images/main_bg.jpg) top center no-repeat;
}

#contentainer {
width: 1027px;
height: 100%;
padding: 0px 0px 100px 0px;
_padding-bottom: 0px;
background-color: transparent;
background-position: bottom left;
background-repeat: no-repeat;
}

/* Content */

#flash_nav {
width: 830px;
height: 255px;
}

/* Footer */

#footer {
width: 100%;
min-width: 800px;
margin: -84px 0px 0px 0px;
_margin: 0px;
background: transparent url(../images/footer.png) bottom center no-repeat;
_background: none;
padding: 0px;
text-align: left; /* Needed for IE*/
}

#footer div {
width: 940px;
height: 60px;
margin: 0px auto;
padding-top: 40px;
color: #FFFFCC;
font-size: 12px;
}