Auto Margin CSS not working in Internet Explorer

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.

IE-AutoMargin1

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%;
 }

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *