IE6 and 7 centering container issue

**KarmaDungyu** · Feb 15, 2008 04:00

Hi all,

I'm trying to do a quick makeover on part of a site what was created long time back with old school tables layout. I want to make it look similar to the newer parts which use css layout. In brief, I've taken a fluid full width tables based layout, wrapped all the tables into a containing div, and want this to centre horizontally on the page.

The container div centres perfectly in Firefox (pc), but is left aligned in IE 6 and 7 (pc). I've changed all the html, body and container code to the correctly aligned new style css layout page, but it still aligns to the left of the browser in IE6 and 7. As I'm banging my head looking at the same code without any more ideas, I wonder if anyone could shed light on why this is happening please?

many, many thanks in advance,

Karmadungyu

My newstyle css based layout which centres fine in IE is at:
http://www.defactosoftware.com/stagi...es_ledger.html
http://www.defactosoftware.com/stagi...stylesheet.css

The incorrectly aligned oldschool tables based layout (now wrapped in a div) is at:
http://www.defactosoftware.com/stagi..._facto_s5.html
http://www.defactosoftware.com/stagi...et_interim.css

The start of each stylesheet is the same code:

Code:

html {
	height:100%;
}
body {
	margin:0px;
	padding: 40px 0px 4px 0px;
	background: url("../images/utility/background/back.gif") repeat-x top left #043047;
}
#wrap {
	position:relative;
	border:1px solid #000;
	margin:auto;
	min-height:100%;
	width:780px;
	background-color:#ffffff;
	color:#000000;
}

**KarmaDungyu** · Feb 15, 2008 04:15

ah ... think I've got it ....

think it is because I had this in the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

instead of
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

:-(

just checking it through ....

**Erik J** · Feb 15, 2008 06:38

For IE6 I think you need "text-align:center" in the body-rules to make #wrap centered.

In standard mode, IE7 understands the rule "margin:0 auto" for #wrap.

**KarmaDungyu** · Feb 15, 2008 07:22

Hi ... thanks for that ... .seems to work fine in IE6 without that - just the DTD change.

I've altered the html and css ... so you won't be seeing the same code at the url's anymore ....

many thanks for your help,

Mark

**Dan Schulz** · Feb 15, 2008 14:22

Originally Posted by erik.j

For IE6 I think you need "text-align:center" in the body-rules to make #wrap centered.

In standard mode, IE7 understands the rule "margin:0 auto" for #wrap.

Erik, the text-align: center; trick is not necessary if IE 6 has a complete and proper DOCTYPE since it forces IE 6 into standards mode.