I have some centered content within a div. It shows up fine in Firefox/Chrome. In IE6 the content expands beyond the div to the entire browser window. Any idea what could be causing this?
A:
Make sure you have the doctype definition at the top of your page. Otherwise, IE6 will open the page in quirks mode which can screw all kinds of stuff up...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Justin Niessner
2009-04-11 20:49:33
A:
The <center> tag is deprecated. You should do something like this:
<div style="text-align:center; margin: 0 auto; width: 400px;">
</div>
That way you will have centered content.
Diego Jancic
2009-04-11 20:51:52
Please provide you updates as edits to your question, don't answer your own question unless its truly and answer. This is not a thread style forum.
bendewey
2009-04-11 20:57:46
+1
A:
IE6 Workaround
The thing to do is to have text-align: center on a parent div e.g. body, so that your content div is centered in IE6.
Then use margin: auto on the content block to make sure the div is centered in better browsers.
CSS
body {
text-align: center;
}
#content {
width: 500px;
margin-left:auto;
margin-right:auto;
}
Jon Winstanley
2009-06-24 15:35:59