Centering container on IE PC not working

[summertime]

I don't know why this isn't working on IE PC.

It works on Firefox PC and IE Mac and Firefox Mac.


CSS CODE:
/* CSS Document */

html,body {
height: 100%;
min-height: 1%;
margin:0;
padding:0;
}

body {
padding: 0;
margin: 0;
background-color: #FFF;
background-image: url(images/bgbg.gif);
background-position: left top;
}

#container {
width: 759px;
background-image: url(images/containerbg.gif);
background-position: center top;
padding: 0;
margin: 0px auto;
position:relative;

}

#header {
background-position: center top;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
width: 751px;
padding: 0;
margin: 0px auto;
}

#address
{

float:right;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-weight: bold;
text-decoration: none;
font-size: 10px;
text-align:right;
margin: 15px 5px 0 0;
line-height: 16px;
}

/* Top Nav */
#navlist
{
float:right;
margin: 30px 0 0 0;
padding: 0 0 0 10px;
}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navlist a:link, #navlist a:visited
{
font-family: Arial, Helvetica, sans-serif;
float: right;
line-height: 14px;
font-weight: bold;
margin: 0 10px 2px 10px;
text-decoration: none;
color: #999;
font-size:11px;
}

#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
color: #000;
}

/*Left Nav*/

#leftnav ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
}

#leftnav a
{
display: block;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 3px;
background-color: #EDDCE4;
border-bottom: 1px solid #777;
text-decoration: none;
margin:0;
}

#leftnav a:link, #leftnav a:visited
{
color: #000;
text-decoration: none;
margin:0;
}

#leftnav a:hover
{
background-color: #FDF1F6;
color: #000;
}

#leftnav a#current
{
background-color: #FDF1F6;
color: #000;
}


/* Floats */
.clearer {
height:1%;
overflow:hidden;
clear:both;
margin-top:-1px;
}

/*Left Side*/


#left{
float: left;
width: 132px;
margin:0;
padding:0;
background-color: #EDDCE4;
border-right: 1px solid #777;
position:relative;
}

#catalog
{
width: 132px;
background-color: #DEBECC;
}

.entryLeft{
border: 1px solid #777;
background-color: #EDDCE4;
padding: 0;
margin:15px;
}

.entryLeft p{
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #002773;
margin: 10px 8px;
padding: 5px;
text-align:left;
}

.entryLeftMin{

min-height: 300px;}


.innerLeft{
float: left;
width: 60%;
margin:0;
padding:0;
}


/*Right Side*/
#right{
float:right;
width: 615px;
margin:0;
padding:0;
background-color: #FFF;
position:relative;

}


.entryRight{
width: 475px;
border: 1px solid #002773;
background-color: #FFF;
padding:0;
margin: 15px 10px;
}

.rightImage
{float:right;
margin: 15px 10px;
}

.subhead
{float:right;
margin: 0 10px 5px;
color: #BFC9DC;
font-family: Georgia, Times, Times New Roman, serif;
font-size: 24px;
font-weight: bold;
}

.entryRight p{
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #002773;
margin: 10px 8px;
padding-right: 0;
text-align:left;
}

.entryRight li{

font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #002773;
margin: 10px 8px;
padding-right: 0;
text-align:left;
}

/* text */

h5
{font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: black;}


/*Design Elements*/
.solidGreyLine
{
border-top: 1px solid #777;
margin: 0;
padding:0;
}

/*Forms*/

.formHeader
{font-family: Georgia, Times New Roman, Times, serif;
font-size: 14px;
color: #F15A22;
margin: 10px 4px;
padding: 0;
text-align:left;
}




.formText{
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #002773;
margin: 10px 8px;
padding: 0;
text-align:left;
}

.pinkButton
{font-family:arial, sans-serif;
border-top:solid 1px #eee;
border-left:solid 1px #eee;
border-bottom:solid 1px #737373;
border-right:solid 1px #737373;
background-color:#DEBECC;
color:#000;

}

textarea, select, input {
font-size: 11px;
font-family:arial, sans-serif;
border-top:solid 1px #737373;
border-left:solid 1px #737373;
border-bottom:solid 1px #737373;
border-right:solid 1px #737373;
background-color:#fff;
color:#666;
padding:2px;
margin-top: 2px;
}

[swishstudios]

Are you using a transitional or strict doctype?

[Paul O'B]

Hi,

Have a look at the FAQ on centering a page to see what swishstudios is talking about.

Basically ie5 and ie5.5. and ie6 in quirks mode don't rcognise that margin-left:auto and margin-right:auto should centre an element.

Instead they wrongly assume that text-align:center will not only centre text but also nested block level elements.

Therefore if you need to satisfy the above requirements you also need to specify text-align:center on a parent (such as the body).

body {text-align:center}

You will then also need to reset the text to text-align:left on the nested container to set the text back to normal.

Hope that helps.

Paul

[summertime]

Ahh, I see. I read that post before I posted, duh. I did two other sites the same way and they centered. I guess I had text-align: center in the body but didn't realize it's full purpose.

I didn't see anything about what swishstudios was referring to in the FAQ thread on centering a page, or at least I didn't get it.

Well thanks again.

[Paul O'B]

I didn't see anything about what swishstudios was referring to in the FAQ thread on centering a page, or at least I didn't get it.

My mistake - I thought I mentioned it in there. What swishstudios should really have said is are you in quirks or standards mode. If you don't use a doctype , or use a partial doctype, or use the xml prologue then ie6 reverts to quirks mode and behaves in some manners (although not all) similar to ie5 and 5.5.

Strict or transitional in fact makes no difference at all Its quirks or standards mode that has the effect.

Paul