ie7 and ie8 ignore "margin:0px auto;"

Question

http://blog.helpcurenow.org

I'm working on the development of this blog and it seems ie7 and ie8 both are displaying the content so that the container seems to be ignoring the "margin:0px auto;" rule.

It could be something else I'm just not getting, but either way the effect is that the content (as well as the navigational links) are floating to the left for some reason.

The strange thing is that a) it is not occuring at all in Firefox or Safari - OK, is that really so strange?? and b) it is not isolated to ie7, it seems ie8 is also doing this.

I HAVE NO CLUE WHY - ANY IDEAS??

Thank you!!

Answer 1

Get rid of the "<!--HOSTURL:blog.helpcurenow.org--><!--HOSTURL:blog.helpcurenow.org-->" comment at the top. The doctype needs to be the first thing after the HTTP headers, or IE goes into quirks mode (and doesn't understand the "margin: auto" jazz).

Answer 2

Your page is rendering in Quirks Mode in IE because you have a comment:

<!--HOSTURL:blog.helpcurenow.org--><!--HOSTURL:blog.helpcurenow.org-->

before the <!DOCTYPE ...>. The DOCTYPE needs to be the first thing in the document, or IE will ignore it.

If you remove that comment, or move it after the DOCTYPE, it works perfectly.