I was scratching my head today (and doing a bit of swearing) when a web page that should have been centered no longer was on Internet Explorer. The page was still correctly centered in Safari and Firefox. The CSS for the centered element looked something like:
margin: 0px auto;
It took me a while to work out what was wrong. It turned out that my problem was that my html file had a comment before the !DOCTYPE element. That is, while the top of the file should have looked something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
it actually looked like something like this:
<!-- this comment mucks things up - - > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
The problem is that that innocent looking comment is enough to put the IE7 renderer into its backwards compatibility quirks mode. And in that mode,
margin: 0px auto does not center things as planned.