CSS Forum

**jim.thornton** · 01-24-2008, 12:11 AM

Hi Guys,

I haven't been around in a while... I've been VERY busy with work/family and recently started school full time along with work full time.

I'm doing something for a friend but for the life of me, I can't see why the container won't center. I've got (margin: 0 auto

, and it works in FF just not in IE.

Here is the CSS:

Code:

<style>
* {
  padding: 0px;
  margin: 0px;
}

body {
	 background-color: #C0C0C0; 
	 background-image: url('1.png');
	 font-family: Verdana;
	 font-size: 82%;
	 font-color: #90B854;
}

h1, h2, h3,h4, h5,h6 { 
	font-weight: bold; 
	margin-bottom: .2em;
}

h1 { font-size: 1.6em;}
h2 { font-size: 1.5em;}
h3 { font-size: 1.4em;}
h4 { font-size: 1.3em;}
h5 { font-size: 1.2em;}
h6 { font-size: 1.1em;}

#container {
     width: 640px;
	 margin: 0 auto;
}

#header {
     background-image: url(logo.jpg);
     background-color: #94D331;
	 height: 120px;
	 width: 100%;
	 border: 1px solid black;
}

#toolbar {
	 height: 30px;
	 width: 100%;
	 margin: 15px 0 15px 0;
}

#toolbar ul {
     max-width: 80%;
	 margin: 0 auto;
	 text-align: center;
	 line-height: 30px;
	 list-style-type: disc;
	 list-style-position: inside;
}

#toolbar ul li {
     display: inline;
}

#toolbar ul li a {
     margin-left: 20px;
	 font-weight: bold;
}

#toolbar ul li a.nodisc {
     margin-left: 0;
}
	 
#mainarea {
	 width: 100%;
	 border: 1px solid black;
}

#titlebar {
     width: 100%;
     text-align: center;
	 border-bottom: 1px solid black;
	 font-size: 1em;
	 background-color: white;
}

#titlebar h1, h2, h3, h4, h5 {
     margin: 0;
	 font-size: 1em;
	 line-height: 1.4em;
}

#content {
     width:100%;
	 height: 800px;
	 padding: 1em 0;
	 background-color: #90B854;
	 background-image:url(backgrad.jpg);
	 background-position:left bottom;
	 background-repeat:repeat-x;
}

#content p, ul, ol, h1, h2, h3, h4, h5, h6 {
     width: 98%;
	 margin: 0 auto;
}

#content ul {
     width: 85%;
}

#content ol {
     width: 85%;
}

#footer {
     margin-top: 20px;
	 border: 1px solid black;
	 background-color: #94D331;
	 width: 100%;
	 height: 20px;
} 
</style>

Here is the HTML:

Code:

<body>
     <div id="container">
	 	  <div id="header">
		  	   &nbsp;
		  </div>
		  
		  <div id="toolbar">
		       <ul>
			       <li><a href="#" class="nodisc">Home</a></li>
			       <li><a href="#">About</a></li>
			       <li><a href="#">Plans</a></li>
			       <li><a href="#">Contact Us</a></li>
			   </ul>
		  </div>
		  
		  <div id="mainarea">
		  	  <div id="titlebar">
		  		   <h1>Terms of Service</h1>
			  </div>

		  	  <div id="content">
			  <h3>Sub Title</h3>
			  <p>Paragrah Text</p>
		  	  </div>
		  </div>
		  
		  <div id="footer">
		       Footer
		  </div>
	 </div>
</body>

I have attached the screenshots for each.

**TributeK** · 01-24-2008, 12:55 AM

I was messing with this for a minute and found that if you put: text-align: center; within the body{} it will center the template, as well as all of your text, but I just put: text-align: left; within the #container{} and that fixed that problem. Should work for you too, give it a shot.

body {
background-color: #C0C0C0;
background-image: url('1.png');
font-family: Verdana;
font-size: 82%;
font-color: #90B854;
text-align: center;
}

h1, h2, h3,h4, h5,h6 {
font-weight: bold;
margin-bottom: .2em;
}

h1 { font-size: 1.6em;}
h2 { font-size: 1.5em;}
h3 { font-size: 1.4em;}
h4 { font-size: 1.3em;}
h5 { font-size: 1.2em;}
h6 { font-size: 1.1em;}

#container {
width: 640px;
margin: 0 auto;
text-align: left;
}

good luck

**mediarefined** · 01-24-2008, 01:06 AM

IE7 I think behaves now but IE6 still requires text-align:center. I think MS wanted you to use the <center> tag still with IE6

**chrishirst** · 01-24-2008, 05:13 AM

It requires a full & valid doctype for IE6 to centre

the text-align:center is needed for IE5.5 and lower.

**andyp** · 01-24-2008, 09:07 AM

I Would Still Support Your Site On IE6 The Now. But Firefox Always gets It Right.
So Include Both Methods On The CSS That Way Your Site Will Be More Accesible. obviously!.

**jim.thornton** · 01-24-2008, 10:25 AM

Quote:

Originally Posted by chrishirst

It requires a full & valid doctype for IE6 to centre

the text-align:center is needed for IE5.5 and lower.

I thought that I was using a full and valid DOCTYPE.

What would that be for XHTML strict?

**jim.thornton** · 01-24-2008, 10:35 AM

I was just thinking about it and I have another site that works fine in IE6 with the margin: 0 auto

I didn't need to center the text in the body to get that to work.

**jim.thornton** · 01-24-2008, 10:39 AM

It seems to work no problem with Transitional.

Do you think it's okay for me to do this? Or, should I keep it strict?

**ADAM Web Design** · 01-24-2008, 12:17 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

That's the XHTML strict doctype.

What may be throwing your whole thing off is this part of your CSS:

Code:

* {
  padding: 0px;
  margin: 0px;
}

Remove it. Others say to put it in, but I've found it causes nothing but trouble. If you need to add 0 for margin and padding, add it to the elements that require it (e.g. body).