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

There are no comments on this article yet, be the first to leave one

Post a comment

name:
(optional)

email:
(optional)

comment:

call us on 01344 762988