It would be good to post your HTML too, as we need to see what these styles are applying to, as that may be the problem. Presumably everything goes inside the container, but we don’t know without the HTML. Preferably post a link.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Meet Barbara - Touchstone Communications</title>
<style type="text/css">
@import url(css/styles.css);
</style>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body id="barbara">
<div id="container">
<div id="header">
<h1>
Meet Barbara - Touchstone Communications
</h1>
</div>
<div id="navigation">
<ul>
<li id="t-index"><a href="index.html">Home</a></li>
<li id="t-barbara"><a href="barbara.html">Meet Barbara</a></li>
<li id="t-tracy"><a href="tracy.html">Meet Tracy</a></li>
<li id="t-work"><a href="work.html">How We Work</a></li>
<li id="t-expertise"><a href="expertise.html">Our Expertise</a></li>
<li id="t-services"><a href="services.html">Our Services</a></li>
<li id="t-contact"><a href="contact.html" class="page_nav page_nav_last">Make Contact</a></li>
</ul>
</div>
<h1>
<img src="http://www.sitepoint.com/forums/images/barbara_elliott.jpg" alt="photo of Barbara Elliott" class="image_float_left" />Barbara <br /> Elliott
</h1>
<div id="content">
<div id="main">
<p>
I’m a graduate of the Marketing Institute of Ireland with over twenty years experience in public relations consultancy and in-house, advising and working with clients in almost every sector you can name.
The scope and variety of what I do is one of the big attractions for me and I relish the challenges that working in public relations brings.</p>
<p>I’m proud to be a multiple recipient of the Certificate of Excellence at the PRCA Awards for Excellence in Communication for my work in corporate sponsorship, public information and healthcare. </p>
</div>
<div id="aside">
<p>When not working, it’s all about family and close friends. Inbetween, I devour books, watch a lot of films, practise yoga and can’t resist local community fundraising quiz nights. </p>
</div>
<div><a href="tracy.html" class="pink">Meet Tracy</a></div>
</div><!--ends content -->
<div id="footer">
<ul>
<li>Touchstone Communications</li>
<li>+123456789</li>
<li><a href="mailto:me@example.com">me@example.com</a></li>
</ul>
</div>
<!--ends footer -->
</div><!--ends container -->
</body>
</html>
I tested your code in IE6 and it centered fine. Only difference was that I didn’t use @import but just pasted the CSS inside the <style> tags. Maybe try a standard stylesheet link and see it that helps.
I also wouldn’t use that outermost div of 100% width. You can just as well put those styles on the <body> element.
Duh, I’m a twit. I thought those styles on the <body> were actually for an other div. (Or, to put it another way, I thought you havd a div of width: 100% around the container. Didn’t look carefully enough.) Just remove the width setting on the body altogether, as it’s not needed.
I have checked the site (Touchstone Communications - Public Relations) on IE 6 and it is still not centering the page plus the pages where i have 2 lists side by side they are overlapping.
I have checked the doc type declarations and validated the pages via w3c website - does anyone know what might be the problem
The page is centering in IE6 ok but is a little out due to the double margin-bug on the floated #aside. Add display:inline to fix the bug (see faq on floats for more info).
As the element next to #aside is floated left then you don’t need the margin-left:24px on #aside as it is redundant and eats up any breathing space that you might have had for errors.
The list overlaps because you have given it a 10px margin which … err… makes it overlap
From the previous replies it seems that yes the page is centered in IE 6 however on my IE 6 it is aligning left. Please see screenshot attached. Is this just my IE6 ?
ok I cleared cache and refreshed and also checked on another machine that never had visited the site and still left aligned- thx for all the replies - don’t know whats going on - think i will leave it at that
Of course here your code doesn’t work in ANY browser… and just leaves me with a bunch of questions… Like:
Is this a NEW site? If so, what’s with the Tranny doctype? Transitional is for supporting old/outdated/half-assed coding techniques, NOT for building new websites.
what’s with all the endless DIV for nothing. You’ve got perfectly good semantic block-level containers like H1 and UL, what do you need the extra div like #header and #navigation around them for?
much less the ID on the body.
and the content cloaked H1
and the multiple H1’s…
and the list around unrelated items in the footer.
comment placement that could trigger IE rendering errors.
… and some sensible formatting wouldn’t hurt either.
I’m guessing wildly here, but I suspect that the markup for that should look a little more like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<link
rel="shortcut icon"
href="/favicon.ico"
/>
<title>
Meet Barbara - Touchstone Communications
</title>
</head><body>
<div id="pageWrapper">
<h1>
<img
src="http://www.sitepoint.com/forums/images/barbara_elliott.jpg"
alt="photo of Barbara Elliott"
/>
Barbara<br />
Elliott
</h1>
<ul id="mainMenu">
<li><a href="index.html">Home</a></li>
<li><a href="barbara.html">Meet Barbara</a></li>
<li><a href="tracy.html">Meet Tracy</a></li>
<li><a href="work.html">How We Work</a></li>
<li><a href="expertise.html">Our Expertise</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="contact.html">Make Contact</a></li>
</ul>
<div id="content">
<div class="subSection">
<p>
I’m a graduate of the Marketing Institute of Ireland with over twenty years experience in public relations consultancy and in-house, advising and working with clients in almost every sector you can name. The scope and variety of what I do is one of the big attractions for me and I relish the challenges that working in public relations brings.
</p><p>
I’m proud to be a multiple recipient of the Certificate of Excellence at the PRCA Awards for Excellence in Communication for my work in corporate sponsorship, public information and healthcare.
</p>
<!-- .subSection --></div>
<div class="subSection odd">
<p>
When not working, it’s all about family and close friends. Inbetween, I devour books, watch a lot of films, practise yoga and can’t resist local community fundraising quiz nights.
</p>
<!-- .subSection.odd --></div>
<a href="tracy.html" class="meet">Meet Tracy</a>
<!-- .content --></div>
<div id="footer">
Touchstone Communications
<span>+123456789</span>
<a href="mailto:me@example.com">me@example.com</a>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
I’d have to see a live page with all the images in place to say for sure though. The CSS once I got it to apply (using LINK) still isn’t telling me a whole lot – well, apart from the broken image replacement technique on the first H1 (that probably is so presentational it shouldn’t even be in the markup – either that or the second h1 shouldn’t even be a heading), the use of that broken “62.5%=10px” nonsense (which isn’t even true on my computer!), a fixed width that’s not even 1024 friendly, reliance on default line-heights which is why all the content lines are overlapping each-other here, and presentational classes like ‘nonbold’ and ‘pink’ missing the point of using CSS in the first place.
Apart from the extra errors Deathshadow has mentioned above you don’t seem to have used the code I gave you earlier so the page is still off-center in ie6 with the double margin bug pushing the container wider and thus the layout looks off-center
