Can't center my content on IE

HTML & CSS
1

Hello, my website is working just fine in FF and Chrome… but in IE, as usual, centered content doesn’t work:

http://cudamine.com/icame/sitemundial/

css:


* {margin:0;padding:0;} 

html, body {
	height: 100%;
    background-image:url(images/grass.jpg)
}

#wrap {
	min-height: 100%;
}

#main {
	overflow:auto;
	padding-bottom: 50px;
}  /* must be same height as the footer */

#footer {
	position: relative;
	margin-top: -50px; /* negative value of footer height */
	height: 50px;
	background:#000;
	clear:both;
} 

#footer-content {
	width:1000px;
	height:50px;
	background-color:#fff;
	margin-left:auto;
	margin-right:auto;
} 

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

#header {
	width:100%;
	height:100px;
	background-color:#000;
} 

#header-content {
	width:1000px;
	height:100px;
	background-color:#fff;
	margin-left:auto;
	margin-right:auto;
} 

#flash {
	margin-top:30px;
	width:1000px;
	height:150px;
	background-color:#fff;
	margin-left:auto;
	margin-right:auto;
} 

#mainwrapper {
	margin-right:auto;
	margin-left:auto;
	width:1000px;
	height:100%;
} 

#content {
	margin-top:30px;
	width:700px;
	height:850px;
	background-color:#fff;
	left:50%;
	margin-bottom:30px;
} 

#contentbox1 {
	width:250px;
	height:200px;
	margin-left:750px;
	background-color:#fff;
	position:absolute;
} 

#contentbox2 {
	width:250px;
	margin-top:230px;
	height:200px;
	margin-left:750px;
	background-color:#fff;
	position:absolute;
} 

#contentbox3 {
	width:250px;
	margin-top:460px;
	height:200px;
	margin-left:750px;
	background-color:#fff;
	position:absolute;
} 

#menu {
	width:1000px;
	top:70px;
	position:absolute;
	height:30px;
	background-color:#00ffff;
	margin-left:auto;
	margin-right:auto;
}
2

Hi, which IE version are you taling about? IE6/7 center the content :).

3

Ah, IE8…it’s most likely because of this validation error

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px[B];/[/B]
}

After the margin-top (the foward slash)

4

Ryan, thanks so much dude, you’re always fantastic help.

Thanks everyone else as well for all the help.

<3 Sitepoint.

5

Glad it worked :). You’re welcome

6

The problem is your conditional comment :slight_smile:

<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100&#37;}
	</style>
<![endif]-->

IE6 doesn’t understand display:table so that’s why it isn’t affected, and that CC doesn’t affect IE7.

7

Do you have a valid doctype tag as the very first thing in the HTML? If not then IE goes into quirks mode and centring doesn’t work.

8

i believe so felgall

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>

9

I removed the slash, problem persists :(… even tried removing the whole opera fix div to see if that was causing it.

I’ve updated the files as well to reflect that change.