IE7 beta 2 breaks the alternate box model hack

update: the !important-bug will be fixed in IE7 [MS], so this page is obsolete.

Live test:

Edwardson Tan explains the Alternate Box Model Hack.

  1. #box {
  2. background: red url(bg.gif) no-repeat center center; /*100x100px*/
  3. height: 100px;
  4. padding: 0 25px;
  5. width: 100px !important;
  6. width /**/: 150px;
  7. }

This often used, well known hack is assuming that modern browsers would properly implement !important.

IE7b2, like older IE, still ignores that !important within the same rule. MS has fixed the /**/-comment bug. Therefore, the width:150px is applied in IE7b2, like IE5.5/ IE6 in quirks mode, but with the modern box model. Padding is added, this results in a width of 200px.

IE7b2 screenshot

screenshot shows a box that is too wide.

Feb. 3, 2006. Ingo Chao