homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

margin-left: auto; margin-right: auto; in IE

5+ Year Member

Msg#: 3807909 posted 4:27 pm on Dec 15, 2008 (gmt 0)

when i do margin-left: auto; margin-right: auto; in IE it doesnt center the container, but it does in FF, safari, etc. is there something im missing that i need to add?



WebmasterWorld Senior Member 10+ Year Member

Msg#: 3807909 posted 5:11 pm on Dec 15, 2008 (gmt 0)

I'm pretty sure the container needs a width and the body needs to have text-align:center...


WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3807909 posted 7:51 pm on Dec 15, 2008 (gmt 0)

As far as I know it's mainly an issue with IE6, not so much with IE7. And then mostly when you have it in quirksmode.

The need for a reduced width is rather universal as on block elements as they otherwise take up all the available width

The "hack" to give the parent text-align:center and the element itself text-align: left is only needed when you have IE6 in quirksmode in my experience.

To avoid quirksmode: use a full doctype and no xml preamble if you use xhtml ...


WebmasterWorld Senior Member 5+ Year Member

Msg#: 3807909 posted 7:14 am on Dec 16, 2008 (gmt 0)

At the risk of repeating myself:

The issue with margin:0 auto; was legacy browsers like ie5.5 and below.

ie6 and above supports auto margins. This requires a block element with a width set to less than 100%. (Otherwise block elements expand full width and there is no "centering" effect.)

text-align:center set on the parent element is a technique for older browsers who would apply this to child elements as well as text. That includes ie5.5 and below, and is required for ie6 if the coder chooses to code in "quirks mode".

Once text-align:center has been set on a parent element the alignment must be re-set (usually to text-align:left) on relevant child elements because alignment should be (and is) cascaded/inherited by conforming browsers.

These are not hacks.

tr8er8, I strongly recommend you avoid quirks (and/or "almost standards") modes - they belong to a time when coders were trying to move their code from the era of proprietory html/css/javascript to conforming to a single set of recommendations that browser manufacturers were implementing fairly randomly. (Don't get me started on a history of Opera)

Avoiding quirks/almost standards is achievd via doctype selection. FAQ: Choosing the best doctype for your site [webmasterworld.com] in the forum library and the first two links in the "reference" section explain how to choose. Maybe also check out the companion Why most of us should NOT use XHTML [webmasterworld.com]

If you're not familiar with the characteristics of block/inline elements (easy and really helps) check out w3.org, and maybe g* blooberry (old but still accurate).


5+ Year Member

Msg#: 3807909 posted 4:27 pm on Dec 16, 2008 (gmt 0)

thank you ill try it out, and also, im using just regular html/php :D

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved