CSS position problem

[ChrisBolton]

I seem to be having some problems positioning a DIV in wait for it... Firefox (for the first time I might add). It seems to work fine in IE (for a change). What I'm trying to achieve with this is a footer that is the full width of the browser (to acommodate the background image) and a centrally positioned box inside to contain the footer content.

Anyway, this is the HTML:

<div id="footer">
<div class="footerBox">
</div>
</div>

And this is the CSS:

#footer {
clear: both;
margin: 0 auto; /* For most browsers */
padding: 0px;
width: 100%;
height: 400px;
text-align: centre; /* IE Fix */
background: url(../images/b/body/footerBg.jpg) no-repeat top center;
}
.footerBox {
width: 845px;
height: 135px;
padding: 50px 40px 0 35px;
text-align: left;
background: url(../images/b/body/footerBoxBg.png) no-repeat top left;
}

Any help would be gladly appreciated.

Kind Regards.
Chris.

[Xapti]

To center an object, you need to set the OBJECT's margin to "0 auto", not the container's. Only in IE do you apply a style to the container, since it's a style that affects it's children.

[ChrisBolton]

Mmmm, there it is. Sorry, I was in such a rush last night when I was building this, didn't see that. Thanks Xapti.