IE specific margin left

So, for some reason this div is ignoring margin:0px auto; for #MainArea

http://rpn.epicsrv.com/

I tried to overcome by adding margin-left:1.5em; for IE only, but can’t get that to work.

I just discovered the answer and so I will still post this since it was a pain in my ass. I need to set #MainArea to display:block;

I tried this solution when I read something about the fact that you need to do this when the div/section is less than the width of the parent. In this case my #MainArea div is 95% width while it’s parent is 100% width.

Only block elements can have dimensions applied and the new html5 elements such as main are inline by default so you need to set them to block until user agents catch up.


article, aside, figure, footer, header, nav, section, details, summary,main {display: block;}

If you are supporting ie8 then you also need the html5shiv.

Off Topic:

The newer browsers are catching up, it seems, as the latest versions of Chrome, Firefox, Opera and Safari default them all to block now. Only IE11 still hasn’t woken up yet. (Seems incredible that Ms is dragging its feet on something so simple.)

article, aside, footer, header, hgroup, main, nav, section {
display: block;
}

Disappointing, yes. But incredible? Microsoft? Mwa. They’re continuing a tradition, I’d say. :wink: