articles:

IE7 margin auto not working

Below is a code snippet that illustrates how the margin auto doesn't work in IE7 as it does in pretty much every other modern browser.

<style type="text/css">
div{width: 50em; margin:0 auto; border:1px solid #CCCCCC}
</style>
.....
.....
<body>
<div>hello world</div>
</body>
....
...
In IE6, Firefox,opera and safari (well at least safari on windows) the above code will render a 50em wide DIV with a grey border in the middle of the window, regardless of the width of the window. However, in IE7 the DIV will be left aligned.

There is a quick, if a little unsatisfactory fix to this problem, see the revised <style> section below:

<style type="text/css">
body{text-align: center}
div{text-align: left; width: 50em; margin:0 auto; border:1px solid #CCCCCC}
</style>


This will now render a 50em wide DIV with a grey border in the middle of the window regardless of the width of the window in IE7 as well as in the other browsers.


Comments

Posted on Monday, November 01, 2010 1:17:00 PM GMT by Chris Brandrick
Thanks for this, simple fix. Just works.
Posted on Tuesday, November 09, 2010 2:03:00 PM GMT by Redwan
Thanks Man it works fine for me.
Posted on Wednesday, August 10, 2011 7:38:00 AM GMT by Raton
Thanks !!! It works just fine :)
Posted on Friday, October 14, 2011 12:53:00 PM GMT by claus Fischer
Thank you! Simple fix, and it works.
Posted on Friday, October 28, 2011 7:14:00 AM GMT by Jake Dacquel
woo!! Thank you bro! super thanks! it works.. =D
Posted on Tuesday, November 01, 2011 4:34:00 PM GMT by Adil
If your doctype isn't FULL/correct, IE kicks into quirks mode. Quirks mode doesn't support the margin property. So, make this your doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

You can go to http://www.w3.org/QA/2002/04/valid-dtd-list.html and pick a separate doctype.
Posted on Tuesday, January 24, 2012 4:37:00 PM GMT by anonymous
Thanks for the doctype tip! Worked like a charm.
Posted on Saturday, April 21, 2012 9:55:00 AM GMT by Ajs
Thanks.
Posted on Tuesday, July 24, 2012 7:29:00 AM GMT by anonymous
add this in top of ur code
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Posted on Tuesday, October 16, 2012 10:36:00 AM GMT by Higgi
You've just rescued me... thx so much!

Post a comment

name:
(optional)

email:
(optional)

comment: