IE Hack: CSS Centering – Another Reason I Hate Internet Explorer

So here’s another common Internet Explorer CSS hack that’s pretty popular and not too ugly.

Here’s The Problem

ie-css-min-height-hack
This is how normal people horizontally center block elements using CSS: You slap on a width (I mean, that should be obvious enough right?). Then you set the left and right margins to auto, and Voilà, centered!

body #box {
	margin: 0 auto;
	width: 780px;
}

Well except in Internet Explorer and some older browsers.

Fixing The Problem

This one is a bit nicer than the CSS min-height hack. You need to use the text-align property to center for the element above, because Internet Explorer sucks and doesn’t understand the auto margin. Now too fix this, you need to reset the text-align to left.

body {
	text-align: center;
}

body #box {
	margin: 0 auto;
	padding: 56px 0 20px;
	width: 780px;
	text-align: left;
}

That’s it folks!

Comments

  1. Hehe I can feel the frustration ;), this one isn’t a big problem though as you point it out already.. Personally I think the screwed up box model of IE6 is more annoying than this one, but you shouldn’t worry about them too much, there are solutions for most of the IE bugs if you what the problem is.

  2. It’s always a pain to implement an IE “fix/hack”. Oh well. That’s what we live with. Hopefully, in the next 5 years we won’t have to worry about that, but that’s getting my hopes up real high.

  3. Just found you on EntreCard. Great blog. I have been getting more into CSS in the last 2 years and now understand why so many developers hate IE. Everything always looks perfect in Firefox and then you see your site or blog in IE and it’s all jacked up. You give great advice. Thanks for the insightful post.

  4. IE has always been a big pain in the but for me. Luckily, things are changing slightly. IE6 right now, seems to be the biggest pain. And luckily it seems to be dying a slow, painful death. So, things are definitely looking up.

  5. i knew i hate too, but most people using IE alot than firefox (i hate this too..)

  6. IE has always been a big pain in the but for me. Luckily, things are changing slightly. IE6 right now, seems to be the biggest pain. And luckily it seems to be dying a slow, painful death. So, things are definitely looking up.

  7. If you include a doctype at the top of the HTML file, either with the URL or specifically enforcing “strict,” this will put IE in “standards compliant mode,” and margin centering will work fine.

    Why IE needs this to function on standards parity with other browsers is absolutely beyond me.

Trackbacks

  1. It’s the end of an era for IE6 at Milestone Search…

    Recently we’ve restructured much of the way our website is formed at Milestone Search. What we’ve basically done is separated all of our core businesses into their own departments and provided 1 exclusive web site for each offering. If you …