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!
[sourcecode language='css']
body #box {
margin: 0 auto;
width: 780px;
}
[/sourcecode]
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.
[sourcecode language='css']
body {
text-align: center;
}
body #box {
margin: 0 auto;
padding: 56px 0 20px;
width: 780px;
text-align: left;
}
[/sourcecode]
That’s it folks!
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.
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.
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.
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.
i knew i hate too, but most people using IE alot than firefox (i hate this too..)