Browser display troubles

[bjgrooven]

I use a wrapper division in my css to center my page in the browser window, but the way that I have done it only appears to work in firefox, not IE. I have attached a copy of my css below. How can I fix this?

body {	margin: 0;	padding: 0;	font-size:12px;	color:black;	background-image:url(../photos/BackFlat.png);	background-repeat: no-repeat;	background-attachment:fixed;	background-position:bottom center;}@media all {  #wrapper  {    margin: 0 auto;    padding: 0;    border: 0;    width: 800px;    text-align: left;     }  }@media handheld {  #wrapper  {    width: 90%;    }  }h1 {	margin:0px 0px 0px 0px;	padding:0px 0px 0px 5px;	font-size:18px;	font-style:"times new roman";	font-style:bold;	font-decoration:underline;	font-family:sans-serif;	color:black;}h2 {	margin:0px 0px 0px 0px;	padding:0px 0px 0px 0px;        font-size:14px;	font-family:serif;	font-style:bold;        color:black;}a:link {	color:default;}a:visited {	color:#9C3333;}a:hover {	color:rgb(175,45,35); }a:active {	color:default;}                                                    #header1 {	height:152px;	width:570px;	float: left;	background-color:rgb(238,209,167);		text-align:center;}	#header1 h1 {	font-size:45px;	font-style:corsiva;	padding:0px;}#header1 h2 {	font-size:24px;	font-style:italic;}#thumb {	width:230px;	height:152px;	float: right;	background-image: url("../photos/CU.jpg");}#content {	height:525px;	width:570px;	float: left;	padding:0px 0px 0px 0px;	margin:0px 0px 0px 0px;	color:#9C3333;}#content h1 {	color:#960000;	font-style:italic, bold;	border-style:solid;	border-color:#9C0033;	border-width:0px 0px 2px 0px;	margin:5px 0px 0px 0px;	padding:2px 0px 1px 3px;}#content h2 {	text-align:left;	color:#960000;	border-style:solid;	border-color:#960000;	border-width:0px 0px 2px 0px;	margin:5px 0px 0px 0px;	padding:2px 0px 1px 3px;}#content p {	padding:7px 10px 10px 10px;	font-size:14px;	overflow:auto;	font-weight:bold;}#content table {	text-align:top;	color:#960000;}#content table h2 {	color:#960000;	border-style:solid;	border-color:#960000;	border-width:0px 0px 2px 0px;	margin:5px 0px 0px 0px;	padding:2px 0px 1px 1px;	text-align:center;}#content table p {	text-align:left;	color:#960000;	border-style:solid;	border-color:#960000;	border-width:0px 0px 1px 0px;}#content a:link {	color:#960000;}#content a:visited {	color:#960000;}	#contacts {	height:525px;	width:230px;	float: right;	margin:0px 0px 0px 0px;	background: transparent url(../photos/ContLogo.jpg) repeat-y center;}#contacts h1 {	text-family:serif;	text-align:center;}#links a:link {	color:rgb(238,209,167);}	#links table {	height:25px;	width:800px;	float: left;	text-align:center;	background-color:black;}#links h1 {	color:rgb(238,209,167);}#links h2 {	color:rgb(238,209,167);}#photos links {	postion:absolute;	top:0px;	left:0px;}#downloads {	height: 152;	width: 230;	float: right;	background: url(../photos/Min.jpg)}#downloads h1 {	color:black;	font-style: bold;	text-align: center;}#downloads h2 {	border-color:rgb(175,45,35)	border-width:0px 0px 2px 0px;	text-align: left;	color:rgb(175,45,35)

[Jonas]

To get cross-browser centering of an element, you need this css:html,body {text-align: center;margin:0;padding:0;}#wrapper {margin: 0 auto;}IE doesn't use margin to center elements, I don't think it understands the "auto" statement as meaning the same on both sides. Therefore, to center-align elements in IE, you use the same css property as you would use to center text, ie text-align: center; only you use it on the parent element, in this case html,body. IE sucks.