Web development IE centering problems
#69 Henry, Tuesday, 29 June 2010 1:39 PM (Category: Web Development)
(Tags: ie css)

I have a couple of websites for other organisations. One website was for a craft group, mostly for women. It was nicely designed, had a pink tone, looked good, I was really happy with it. I checked it against Firefox, Safari, Opera, Chrome, SeaMonkey, Konqueror and it looked great. I don't have any Windows computers here or anywhere near me, so I never got around to looking at it with Internet Explorer. Bad mistake.

Someone mentioned that the craft website was a bit cruddy in design, and I wondered what they meant. So I found someone out there who had Windows (and finding someone in my circle with Windows was not a trivial task), and I looked at it. Oh crap, it looked awful in Internet Explorer.

The way I had designed it, I had nice div blocks centered on the screen. Internet Explorer ignored the centering and jammed them up against the left. Bad.

It's all in CSS, and the way I did the divs was like this:

div .itemblock
    margin: 10px auto 0 auto;

Looks great in all browsers except Internet Explorer. So I did some research and most people had the same suggestion for fixing it to trick Internet Explorer into behaving correctly.

The trick involves setting the body like this:

  text-align: center;

and then setting each div block like this:

  margin: 10px auto 0 auto;
  text-align: left;

Regular browsers handle it and Internet Explorer is supposed to handle it and center the div blocks. Except it didn't work for me. After a lot of experimentation and viewing the page source of good demo websites (like http://flumpcakes.co.uk/css/center-div-ie) I worked out the final step that is necessary for this text-align trick to work.

You have to set the DOCTYPE to a specific DTD:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Once I did that, it all worked and Internet Explorer displayed the website roughly the way I wanted it.