Centers ok in IE but not firefox. Can't figure out why...

 

hope this css helps....

 

body {

background-color:#fff;

margin:0 auto;

clear:both;

text-align: center;

}

 

#container {

margin-top:2px;

background-image:url('images/mnbg.jpg');

width: 760px;

text-align: left;

height: auto;

border:solid 1px #000;

 

}

 

#header {

 

padding-top:80px;

padding-bottom:10px;

margin:2px 2px 2px 2px;

border:1px solid #000;

font-size:8px;

background-image:url(Images/headbg2.jpg);

background-position:top left;

background-repeat:no-repeat;

text-align:center;

}

 

#navigation {

float:left;

width:160px;

background:#FFFFCC url(Images/navbottom.gif) center bottom no-repeat;

margin: 6px 5px 25px 5px;

padding-bottom:15px;

text-align:center;

}

 

#footer {

clear:both;

background-color:#954A00;

background-image:url('images/headbg.jpg');

width:734px;

text-align:center;

padding:10px;

margin: 2px 2px 2px 2px;

border: 1px #000 solid;

}

#content{

border-left:solid 1px #000;

border-top:solid 1px #000;

float:right;

width:574px;

padding:5px;

margin: 5px 5px 5px 0px;

background: #ffc url(Images/mainbottom.gif) right bottom no-repeat;

}

 

thanks in advance...

I knocked up a quick test of this and changed the following code:

 

	body {
background-color:#fff;
margin: 0px; <---- CHANGED
clear:both;
text-align: center;
}

#container {
margin-top:2px;
margin-left: auto;  <---- ADDED
margin-right: auto; <---- ADDED
background-image:url('images/mnbg.jpg');
width: 760px;
text-align: left;
height: auto;
border:solid 1px #000;

}

 

Here's my quick test page : http://www.moonspacedesign.co.uk/test/centreTest.cfm

 

It works fine in both FF and IE6 (haven't tested in IE7)