I'm in the process of doing some advance
IE8 testing, and it seems that the old technique of using "margin: 0 auto;" doesn't work in all cases in
IE8.
The following piece of HTML gives a centered button in FF3, Opera, Safari, Chrome, IE7, and
IE8 compat, but NOT in
IE8 standard:
<div style="height: 500px; width: 500px; background-color: Yellow;">
<input type="submit" style="display: block; margin: 0 auto;" />
</div>
(As a work-around I can add an explicit width to the button).
So the question is: which browsers are correct? Or is this one of those cases where the behaviour is undefined?
(My thinking is that all the browsers are incorrect - shouldn't the button be 100% width if it's "display: block"?)
UPDATE: I'm being a dunce. Since input isn't a block-level element, I should have just contained it within a div with "text-align: center". Having said that, for curiosity's sake, I'd still like to know whether the button should or shouldn't be centered in the example above.
FOR THE BOUNTY: I know I'm doing odd things in the example, and as I point out in the update, I should have just aligned it center. For the bounty, I'd like references to the specs that answer:
If I set "display: block", should
the button be width 100%? Or is this
undefined?
Since the display is block, should
"margin: 0 auto;" center the button, or
not, or undefined?
