galahad3

I've been trying to centrally position my site pages in IE6 but despite using what seems to be the correct and accepted code (though perhaps not as the case may be), in IE6 the site pages keep aligning left.

In IE7/8, FF etc. the alignment is centered and fine.

The CSS I'm using is:

/* global to standardise padding etc. */

* {
padding:0;
margin:0;
border:0;
line-height:0;
}

body {
margin: 0;
padding: 0;
text-align: center;
background: #ffffff;
font-family:Arial, Helvetica, sans-serif;
overflow:auto;
height:100%;
}

#container {
width: 1002px;
background: #ffffff;
margin: 0 auto;
text-align: left;
height:auto;
}

This CSS works fine (in IE6) on another site, i.e centers ok.

Some articles talk about IE6 being funny with XHTML doctypes, so I swapped it for an HTML Transitional doctype- but that wouldn't work either.

Any ideas as to how I can make the site centered properly in IE6? As far as I can tell the above code should work- but doesn't...

colmustard

I think you should take a good look at this diagram
http://www.w3.org/TR/2005/WD-css3-ba...d-20050216/box

that explains how padding, and margins work very well, so I think once you understand this concept it becomes 2nd nature to position elements as you want.

________________________________________

For ideas on how to solve your problem, if all else fails, try this:

CSS

body {
margin: 0;
padding: 0;
background: #fff;
font-family: Arial, Helvetica, sans-serif;
}

#container {
width: 1002px;
background: #fff;
margin: 0 auto;
padding: 0;
}
#container div {
width: 1002px;
background: #000; /*change to what you want*/
margin: 0 auto;
padding: 0;
}

HTML

<div id="container">
<div>test</div>
</div>


That worked perfect in my test, but remember that its not the smartest solution, it requires unnecessary div tags, but if you can't get it to work and you don't mind the clutter then its fine

galahad3

Didn't work unfortunately, IE6 still positions everything left...

I used:

body {
margin: 0;
padding: 0;
text-align: center;
background: #ffffff;
font-family:Arial, Helvetica, sans-serif;
overflow:auto;
height:100%;
}

#container {
width: 1002px;
background: #ffffff;
margin: 0 auto;
text-align: left;
height:auto;
padding:0;
}

#innercontainer {
width: 1002px;
background: #ffffff;
margin: 0 auto;
padding:0;
}

So everything is wrapped inside #innercontainer which itself is wrapped inside #container.

???

colmustard

why did you change it?

You have useless rules in there that aren't making your site but breaking it, and the code I wrote tested and worked perfect.

The reason my code worked in ie6 was because it gave a set width of 100% to the content inside the container, and then set a width of 1002px with equal margins on either side to center it inside that original 100% width.

Just use what I gave you, and you don't want to change the id, just stick with the #container.

galahad3

Okay, I've now used this:

body {
margin: 0;
padding: 0;
text-align: center;
background: #fff;
font-family:Arial, Helvetica, sans-serif;
}
#container {
width: 1002px;
background: #ffffff;
margin: 0 auto;
text-align: left;
height:auto;
padding:0;
}
#container div {
width: 1002px;
background: #fff; /*change to what you want*/
margin: 0 auto;
padding: 0;
}

(Keeping the text-align statements in order to keep it centred in IE7/8 and FF).

Unfortunately this has had the effect of throwing the page conten t and divs all over the place and messing the page up completely...

However if I take out the #container div it's then ok again in IE7/8 and FF.

Still the long-standing left-align issue in IE6.

colmustard

I'm gona need to see the actual page to figure this out then, because theres something your not giving me that's breaking it.