margin: 0 auto; not centering in Internet Explorer?

Published on Sep 18, 2009 by Jamie Munro

The other day, I had chopped up a design.  Sliced and diced if you will.  I proceeded to creating the HTML once all of the images were sliced up.

Things were going great.  As per usual I began designing in Mozilla to use Firebug to tweak the CSS and HTML.  Once I finished the design, I proceeded to test in Chrome, Safari, and of course, Internet Explorer.

Every browser but Internet Explorer was working perfectly, what gives?

The worse part is, I know I've had this problem before.  If you're like me, you may have worked on 100s of different projects and they all start to blend together because you've done this here and that there.

Luckily, I was actually able to remember what the problem was!  I forgot my DOCTYPE at the top of my file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Add that bad boy to the top of your file, reload and voila, Internet Explorer now loads the web site like every other browser does!

This may not be the only issue that you see without a DOCTYPE and Internet Explorer.  Sometimes it may be a spacing issue, things wrapping incorrectly, etc...  The route of the cause will, most likely, be a missing DOCTYPE.

Cheers.

Tags: CSS | Internet Explorer | margin: 0 auto

Related Posts

blog comments powered by Disqus