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

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.

Answer 2

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 3

RichieHindle - Thanks so much ! I was adding a static home page to my site and made the mistake of linking to my custom stylesheet before the get_header() call ! This obviously caused exactly the problem you described. Spent 2 or 3 hours on this before I saw your post.

Thanks again !

Answer 4

While the above is obviously the ideal answer, for some older and more obscure browsers the only fix is to use a text-align center reset. For example if you want to position a 960px container in the center of the window you can put text-align center on your 100% width wrapper and then text-align left on the 960px container.