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 :P 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 :P

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

[BigAlan]

iDenning,

Try my solution and where I have got '#main' change it to '#wrapper' to suite your needs, also you need to change all my CSS I given to you in my previous post (above), all to lower casing.

Hope that helps. You can also use the w3c validator which will check to see if your html and css is valid, which can sometimes help when making a webpage cross browser compatable. Not always the case but can help alot.

Best of luck,

Alan.

[iDenning]

iDenning,

Try my solution and where I have got '#main' change it to '#wrapper' to suite your needs, also you need to change all my CSS I given to you in my previous post (above), all to lower casing.

Hope that helps. You can also use the w3c validator which will check to see if your html and css is valid, which can sometimes help when making a webpage cross browser compatable. Not always the case but can help alot.

Best of luck,

Alan.
Thanks i shell try, +rep

[Lost]

i'm starting to seriously hate my internet at the moment, I suspect I have some sort of virus. Because when I go on google and type something in, click the link, it opens a new window and comes up with this totally random site that i never requested. :S