Using "margin: 0 auto;" in Internet Explorer 8
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?
Answer
Adding <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> solves the issue