Block-level, replaced elements with width: auto;, margin-left: auto; and margin-right: auto; should be centered within their respective parent block-level elements

Expected results: orange bordered buttons should be centered within their green bordered containers

Actual results in IE 8: orange bordered buttons are positioned at the left side within their green bordered containers

Reference: "The used value of 'width' is determined as for inline replaced elements. Then the rules for non-replaced block-level elements are applied to determine the margins."
coming from CSS 2.1, section 10.3.4 Calculating widths and margins: Block-level, replaced elements in normal flow

This bug was originally reported by stusmith at stackoverflow blog on March 19th and 29th 2009.

Internet Explorer 6, Internet Explorer 7, Firefox 3.5.2, Opera 9.64, Safari 4.0.3 and Konqueror 4.2.4 pass both of these 2 tests.

Valid HTML 4.01! CSS compliant