Problem
You have a web page design which automatically centers in Firefox and other browsers, however Internet Explorer does not center. Instead the DIV elements which are meant to center are left adjusted.
You are using margin: 0 auto; to do the centering.
Solution
This issue can happen for a few reasons, including coding errors in the HTML and CSS.
Here are some tips which will hopefully help you fix the issue.
TIP 1: Internet Explorer requires DOCTYPE declaration
Check your HTML to ensure you have included a DOCTYPE declaration.
When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. The doctype declaration must be exact (both in spelling and in case) to have the desired effect, which makes it sometimes difficult.
More information: http://www.w3.org/QA/2002/04/valid-dtd-list.html
TIP 2: Internet Explorer requires the DOCTYPE to be on the first line of the HTML
Same as above, but as an additional qwirk with Internet Explorer the DOCTYPE must be the first first line of the HTML.
Other browsers can cope with the coding error, however Internet Explorer does not. Instead it goes into ‘qwerks mode’ (debugging) – generally this causes other issues as well.
TIP 3: When using ‘margin: 0 auto;’ you must specify the width
You must specify the width in the same DIV element you’re using ‘margin: 0 auto;’ with.
For example, all DIV elements inside ‘main-content’ need to be centred you would use the following CSS code.
#main-content {
margin: 0 auto;
width: 80%;
}