Chinmay

IE6 Auto-width Margins Problem fixed

Many of developers faced the Auto width Margin (margin:0 auto;) problem in IE6 browsers to make the content div center aligned irrespective of browser window.

Here is the solution.

Modify the CSS accordingly:

body {
      margin:50px 0px; padding:0px;
      /* Need to set body margin and padding to get
      consistency between browsers. */
      text-align:center; /* Hack for IE5/Win */
}

#Content {
      width:500px;
      margin:0px auto; /* Right and left margin widths set to "auto" */
      text-align:left; /* Counteract to IE5/Win Hack */
      padding:15px;
      border:1px dashed #333;
      background-color:#eee;
}

Screen Shots:

IE6

IE6 Screen Shots

IE6 Screen Shots

FF3

FF3 Screen Shots

FF3 Screen Shots

This entry was posted in CSS Hacks, Tutorials and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>