CSS help please

[levi1245]

I've been doing html, css and php for a while, but I cannot get the css design to look the same in different browsers. I have tried everything I can think of. the margin-left:auto; and margin-right: auto; works in google chrome to center a <div> but not in IE. I haven't tested this in Firefox or any other browsers yet. I would like a little help to get it to work in both IE and Google Chrome. Any help would be appreciated.

 

[MaestroFX1]

If it is working in Chrome, it should work in Firefox 3+ and IE8+.

Have you tried (overriding?) using
---------
<!--[if lte IE 6]>
<link href="./4_ie6_only.css" rel="stylesheet" type="text/css" />
<![endif]-->
---------

 

[levi1245]

I have scoured the internet trying to figure out how to do that, but never could figure it out... and I have IE 8. So either something is wrong with IE or my coding... here is the css code:

<style type="text/css">
body {
background: #0039E6;
color: #33FFFF;
}
a {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
#main {
margin-left: auto;
margin-right: auto;
width: 750px;
height: 726px;
border: solid 1px black;
background: #33FFFF;
}
#banner {
margin-left: auto;
margin-right: auto;
width: 700px;
height: 150px;
border: solid 1px black;
background-image: url('images/banner.png');
}
#sidebar {
float: left;
margin-left: auto;
width: 238px;
height: 445px;
padding: 5px;
border: solid 1px black;
background: #0039E6;
}
#content {
float: right;
margin-right: auto;
width: 418px;
height: 445px;
padding: 5px;
border: solid 1px black;
background: #0039E6;
}
#marquee {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
background: #0039E6;
width: 692px;
height: 20px;
margin-left: 23px;
padding: 5px;
}
</style>

although it doesn't look right in google chrome now after I tried to figure the problem out on my own....

 

[descalzo]

http://css-discuss.incutio.com/wiki/Centering_Block_Element#Centering_with_auto-margins

They use:

body {
  text-align: center;
  min-width: 500px;
}
#wrapper {
  text-align: left;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

where 'wrapper' is the main content div you are trying to center.

 

[levi1245]

okay. thanks I'll try it.