Why does internet explorer do this?

[iDenning]

Hey

I've coded a layout and in every browser apart from internet explorer is centered, in IE it is on the left.

Does anyone know how to solve this?

Heres my CSS:

body {

	font: 10px verdana;

	color: #666666;

	margin:0px auto 0 auto;

}



a {	font: 10px verdana; }

a:link    { text-decoration: none;  color: #666666; }

a:visited { text-decoration: none;  color: #666666; }

a:hover   { text-decoration: none; color: #666666; }

a:active  { text-decoration: none;  color: #666666; }


body {
	background-image: url(images/bg.png);
}


/* LAYOUT */
#wrapper {
	width: 900px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

#notice {
	background: url('images/notice.png') no-repeat;
	width: 900px;
	height: 79px;
	padding-top: 0px;
	padding-left: 50px;
        text-align: center;
}

#banner {
	background: url('images/banner.png') no-repeat;
	width: 900px;
	height: 136px;
}

#nav {
	background: url('images/nav.png') no-repeat;
	width: 900px;
	height: 40px;
	padding-top: 0px;
	padding-left: 7px;
        text-align: center;
}

#content_bg {
	background: url('images/contentbg.png') repeat-y;
	width: 900px;
}

#left {
	width: 302px;
	float: left;
	margin-left: 0px;
}

#right { 
	width: 579px;
	float: left;
        margin-left: 10px;
}

#newsimg {
	background: url('images/newsimg.png') repeat-y;
	width: 302px;
	height: 188px;
}

#bluebox {
	background: url('images/bluebox.png') no-repeat;
	width: 302px;
	height: 42px;
	padding-top: 7px;
	padding-left: 9px;
}

#greenbox {
	background: url('images/greenbox.png') no-repeat;
	width: 302px;
	height: 44px;
	padding-top: 7px;
	padding-left: 9px;
}

#footer {
	background: url('images/footer.png') no-repeat;
	width: 900px;
	height: 7px;
	clear: both;
}

#copyright {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 25px;
	color: #FFF;
}

+rep for all helpers.

Thanks in advanced

[Fehm]

I may be wrong but I dont think you need to have margin-left:auto; and margin-right:auto; you can just have one, [In the wrapper im guessing?].. MAY BE WRONG THOUGH.
Lol, Im a CSS noob but... it may help.

[BoyBetterKnow]

Which Internet Explorer version Jack?

[iDenning]

I may be wrong but I dont think you need to have margin-left:auto; and margin-right:auto; you can just have one, [In the wrapper im guessing?].. MAY BE WRONG THOUGH.
Lol, Im a CSS noob but... it may help.

i will try thanks

Which Internet Explorer version Jack?

All i think :L

EDIT; It didn't work ;[

[Fehm]

Omnomnomon sorry!
No idea then, Soz

[iDenning]

Omnomnomon sorry!
No idea then, Soz

Lol no problem

Why does IE have to be different to every other browser ;l

[BigAlan]

Hey,
I hope this helps solve your problem..

In the CSS use:

 
body {
Margin: 0px auto;
Padding: 0px;
Text-align: center;
}

#main {
Width: 770px;
Height: 100%;
Margin: 0px auto;
Text-align: left;
Padding: 5px;
}

Now with that CSS, create a Div and give it an ID 'main'. Inside this div everything else should go, such as, other divs or content.. the 'main' div should now be centered keeping a width of 770px with the padding gives us 780px, which is a nice width for users with 800 x 600 screen resolutions. Meaning there will be 10px each side of the 'main' div for that size screen resolution.

Hope this helps.

Best of luck,

Alan.

[Blob]

<div align="center">contenthere</div>

..

[awelsh]

Cant you make a separate ie stylesheet? so if you fix it for IE you can make sure it doesnt mess up for any other browsers because of the fix.

Would be what I would be anyway saves loads of hassle.

[iDenning]

I need to know how to solve it tho lol