DOCTYPE problem with Internet Explorer 6
I'm trying to use the css property "margin:0 auto" to get a centered application.
It is working fine on every browser but IE 6. I've checked that it is DOCTYPE problems.
Non-IE:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Working on IE:
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0"?>
Is anybody having the same problem and knows how to solve it?
# 1
Welcome to the wonderful world of crappy CSS support!
First, a solution to the problem assuming the following HTML with a valid DOCTYPE:
<doctype, html, header stuff>
<body>
<div id="wrapper">
:content:
</div>
</body>
</html>
Here's the CSS:
body
{
text-align: center; /* ie fix */
}
div#wrapper
{
text-align: left; /* fix text align */
}
In my opinion, conditional comments are the best way to go; every version of Internet Explorer has its own quirks and this is a good way to keep things organized and prevent future problems.
For more information, please visit:
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
Anyway, if you have a separate css file for Internet Explorer only, here's an example:
<!--[if IE 6]><link href="../css/ie.css" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
All browsers (except Internet Explorer) see the above conditional comment as an HTML comment - no more, no less. You can also target specific versions of Internet Explorer and have multiple conditional comments on a single page.
Also, I haven't read too in-depth about the <?xml> tag (which I probably should) but I have heard that it may trigger quirks mode in Internet Explorer.
Hope I was of some help.
Dustin
