Center Content in IE

Query about getting content to center in IE

[ElizaJo]

Newbie here with a question that I see has been asked before. I've been trying some of the suggestions I've read on this forum but I've had little success. I thought (and hoped) if I paste my style here perhaps someone can advise me.

Basically, my CSS works well in Mozilla Firefox and Opera (i.e. content is centered on the page) but does not in IE (i.e. content is flush to the left margin).

There is something to do with floating the columns but I'm just not getting it to work for me and I have little knowledge and experience with CSS. Any help is appreciated.

/* #############################################
DOCUMENT STYLES
############################################# */

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

body {
margin: 0px;
padding: 0px;
background: #F0F8FF
font-family: Arial, Geneva, Helvetica, sans-serif;
}

#wrap {
width: 761px;
/*margin: 20px auto;*/
margin-top: 1em;
margin-right: auto;
margin-left: auto;
border: 1px solid #666666;
background: #ffffff;
color: #666666;
font-family: Arial, Geneva, Helvetica, sans-serif;
margin-bottom: 0px;
padding: 0px;
voice-family: "\"}\"";
voice-family: inherit;
}

/* BE NICE TO OPERA */
html>body #wrap {
width: 759px;
}

/* #############################################
LINK STYLES
############################################# */

a:link {
color: #339999;
text-decoration: underline;
}

a:visited {
color: #333399;
text-decoration: underline;
}

a:hover, a:active {
color: #006666;
text-decoration: underline;
}

/* #############################################
STYLES/CLASSES
############################################# */

span.citation {
color: #333333;
}

blockquote {
margin: 1em 2em;
line-height: 1.2em;
}

em {
font-style: italic;
font-weight: normal;
}

/* #############################################
LOGOBAR STYLES
############################################# */

#logobarDiv {
border-bottom: none;
margin: 0px;
padding: 0px 0px 1px 0px;
background: #339999;
position: relative;
}

#logobarDiv h1 {
margin: 0em;
}

#logoScreen {
border-right: 1px solid #666666;
display: block;
}

#logoPrint {
display: none;
}

/* #############################################
EMAILDIV STYLES
############################################# */

#emailDiv {
position: absolute;
left: 0px;
top: 0px;
width: 750px;
text-align: right;
font-size: 80%;
color: #FFFFFF;
}

#emailDiv a:link, #emailDiv a:visited {
color: #FFFFFF;
}

#emailDiv a:hover, #emailDiv a:active {
color: #000000;
}

/* #############################################
NAVBAR STYLES
############################################# */

#navbarDiv {
border-bottom: 1px solid #666666;
margin: 0px;
padding: 2px 12px 3px 12px;
background: #99CCCC bottom;
font-size: 80%;
}

#navbarDiv a:link, #navbarDiv a:visited {
color: #1A8099;
text-decoration: none;
}

#navbarDiv a:hover, #navbarDiv a:active {
color: #000000;
text-decoration: none;
}

#navbarDiv h2 {
display: inline;
font-size: 100%;
color: #000000;
font-weight: normal;
}

#navbarDiv a.youAreHere:link, #navbarDiv a.youAreHere:visited {
color: #ffff66;
}

#navbarDiv a.youAreHere:hover, #navbarDiv a.youAreHere:active {
color: #ffff66;
}

/* #############################################
ALLCONTENT TABLE STYLES
############################################# */

#allContent {
margin: 0px;
padding: 0px;
background: none;
width: 759px;
}

/* #############################################
MAINCONTENT STYLES
############################################# */

#mainContent {
margin: 0px;
padding: 15px 28px;
background: none;
vertical-align: top;
font-size: 80%;
line-height: 1.3em;
width: 577px;
voice-family: "\"}\"";
voice-family: inherit;
width: 521px;
}

/* BE NICE TO OPERA */
html>body #mainContent {
width: 521px;
}

#mainContentLeft {
margin: 0px;
padding: 15px 18px 15px 28px;
background: none;
vertical-align: top;
font-size: 80%;
line-height: 1.3em;
width: 289px;
voice-family: "\"}\"";
voice-family: inherit;
width: 243px;
}

/* BE NICE TO OPERA */
html>body #mainContentLeft {
width: 243px;
}

#mainContentRight {
margin: 0px;
padding: 15px 28px 15px 17px;
background: none;
vertical-align: top;
font-size: 80%;
line-height: 1.3em;
width: 288px;
voice-family: "\"}\"";
voice-family: inherit;
width: 243px;
}

/* BE NICE TO OPERA */
html>body #mainContentRight {
width: 243px;
}

td.mainContent div.section {
margin: 0em 0em 2em 0em;
}

td.mainContent div.item {
margin: 0em 0em 2em 0em;
}

td.mainContent h3 {
font-size: 105%;
margin: 0em 0em 1em 0em;
font-weight: bold;
color: #339999;
}

td.mainContent h4 {
font-size: 100%;
margin: 0em 0em 1em 0em;
font-weight: bold;
color: #000000;
}

td.mainContent p {
margin: 0em 0em 1em 0em;
}

td.mainContent, td.mainContent ul {
margin: 0em 0em 1em 0em;
}

td.mainContent li {
margin: 0em 0em 1em 0em;
url (images/bullet1.gif) repeat;
}

/* #############################################
SIDEBAR STYLES
############################################# */

#sidebarContent {
margin: 0px;
border-left: 1px solid #666666;
padding: 0px;
background: #ffe;
color: #666666;
vertical-align: top;
font-size: 80%;
width: 182px;
voice-family: "\"}\"";
voice-family: inherit;
}

/* BE NICE TO OPERA */
html>body #sidebarContent {
width: 18px;
}

#sidebar {
background: #ffe
padding-bottom: 1em;
}

#sidebar h3 {
font-size: 100%;
margin: 0em 0em 1em 0em;
}

#sidebar p {
margin: 0px 12px 1em 12px;
padding: 2px;
line-height: 1.2em;
}

/* #############################################
COPYRIGHT FOOTER DIV STYLES
############################################# */

#copyrightDiv {
border-top: 1px solid #666666;
margin: 0px;
padding: 3px 28px;
background: #339999;
font-size: 70%;
color: #FFFFFF;
}

#copyrightDiv a {
color: #FFFFFF;
}

[penders]

Hi ElizaJo, it does sound as if you are missing a valid DOCTYPE from the top of your HTML document. As mentioned in this thread...
[webmasterworld.com...]

Without a valid DOCTYPE, IE will render the page in 'quirks mode' and will not interpret your CSS correctly:

#wrap { 
width: 761px; 
/*margin: 20px auto;*/ 
margin-top: 1em; 
margin-right: auto; 
margin-left: auto; 
: 
:

Alternatively, you can put

text-align:center

in the body rule (as IE incorrectly centres block level elements this way) and counteract this with

text-align:left

in your #wrap rule to avoid the text-align:center from cascading into everything!

[ElizaJo]

Hi Penders,

My DOCTYPE wasn't the problem, but your suggestion to put text-align:center in the body rule and text-align:left in the #wrap did the trick.

Thank you!

"Alternatively, you can put text-align:center in the body rule (as IE incorrectly centres block level elements this way) and counteract this with text-align:left in your #wrap rule to avoid the text-align:center from cascading into everything!"

[PSWorx]

Wouldnt it be possible to contain everything in a div, give it a set width then auto margin the left and right of the div?

[penders]

Wouldnt it be possible to contain everything in a div, give it a set width then auto margin the left and right of the div?

I believe that is what ElizaJo was doing with the above code (without seeing the HTML) - but that will not work in IE6 (and I guess IE7?) if it is in "quirks mode" (ie. NOT standards compliant mode). IE6 will be in quirks mode if the DOCTYPE is missing/invalid or there is something else before the DOCTYPE, like a comment or XML prolog! And it will not work in IE5 at all, regardless of 'mode'.

So, if IE has to be in quirks mode, or you need to cater for old browsers then I believe the text-align:center option (above) is an easy workaround.

[SuzyUK]

fwiw.. I believe penders is correct ;)

I too would say that was what ElizaJo's code was doing and margin: auto; will work with a Strict Rendering Doctype but only for IE6 & 7 so legacy support issues may still require this text-align center workaround for a wee while yet,

perhaps it's a good reminder to check out the the Doctype differences [webmasterworld.com] - remember a Doctype isn't necessarily a Strict Rendering one just because it has the word "Strict" in it :)