Centering in IE7. Beware of quirks mode!

Posted by mick on July 3rd, 2009 filed in CSS, HTML

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:


  width: 960px;
  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.


One Response to “Centering in IE7. Beware of quirks mode!”

  1. A Run In With The Quirks Mode Police | MediaFormations Says:

    [...] is where the “House” epiphany moment happened. I found a web site that mentioned something about having a commented line above the DocType would make Internet [...]

Leave a Comment

//