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 01 November 2010 13:17:00 GMT by Chris Brandrick

Thanks for this, simple fix. Just works.

Posted on 09 November 2010 14:03:00 GMT by Redwan

Thanks Man it works fine for me.

Posted on 10 August 2011 07:38:00 GMT by Raton

Thanks !!! It works just fine :)

Posted on 14 October 2011 12:53:00 GMT by claus Fischer

Thank you! Simple fix, and it works.

Posted on 28 October 2011 07:14:00 GMT by Jake Dacquel

woo!! Thank you bro! super thanks! it works.. =D

Posted on 01 November 2011 16:34:00 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 24 January 2012 16:37:00 GMT by anonymous

Thanks for the doctype tip! Worked like a charm.

Posted on 21 April 2012 09:55:00 GMT by Ajs

Thanks.

Posted on 24 July 2012 07:29:00 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 16 October 2012 10:36:00 GMT by Higgi

You've just rescued me... thx so much!

articles:

IE7 margin auto not working

Comments

Post a comment