Internet Explorer box model bug

The Internet Explorer box model bug is one of the best-known software bugsFact|There's no proof that this is a bug. It should be called "non standard behavior" unless a reliable and authoritative source is cited.| ()|date=August 2008 in a popular implementation of Cascading Style Sheets (CSS). It affects CSS-aware versions of Microsoft’s Internet Explorer Web browser for Windows up to version six. Internet Explorer 6 and newer are not affected in their standards-compliant mode; they are affected only in “quirks mode”. The bug did not affect Internet Explorer for Mac on the Apple Macintosh platform, although development for it ended in 2003.

Bug

The CSS box model describes how certain elements of Web pages are displayed by graphical browsers. The box model allows block-level elements—such as p and blockquote—to be surrounded by padding, borders, and margins. According to the CSS1 specification, released by the World Wide Web Consortium (W3C) in 1996 and revised in 1999, when a width or height is explicitly specified for any block-level element, it should determine only the width or height of the content within the box, with the padding, borders, and margins applied afterward. [cite web | url=http://www.w3.org/TR/REC-CSS1-961217#formatting-model | title= Cascading Style Sheets, level 1 | author=Håkon Wium Lie | coauthors=Bert Bos | date=December 17, 1996 | publisher=W3C | accessdate=2006-12-09] [cite web | url=http://www.w3.org/TR/1999/REC-CSS1-19990111#formatting-model | title=Cascading Style Sheets, level 1 | author=Håkon Wium Lie | coauthors=Bert Bos | date=January 11, 1999 | publisher=W3C | accessdate=2007-06-24] Internet Explorer 5 incorrectly includes the padding and borders within a specified width or height; this results in a narrower or shorter rendering of a box. [cite web | url=http://msdn2.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic3 | title=CSS Enhancements in Internet Explorer 6 | author=Lance Silver | month=March | year=2001 | publisher=Microsoft | work=MSDN Library | accessdate=2007-06-24]

Workarounds

Internet Explorer versions 6 and 7 are not affected by the bug if the page contains certain HTML document type declarations. These versions maintain the buggy behavior when in quirks mode for reasons of backward compatibility.cite web |url=http://msdn2.microsoft.com/en-us/library/bb250496.aspx | title=Cascading Style Sheet Compatibility in Internet Explorer 7 | accessdate=2007-06-24 | author=Markus Mielke | date=2006-09-26 | publisher=MSDN "Pages authored under non-strict mode (quirks) will not change behavior in IE7 and will not be affected by broken CSS filters.Pages authored under non-strict mode (or “quirks mode”) will not change behavior in IE7."] For example, quirks mode is triggered:
* When the document type declaration is absent or incomplete;
* When an HTML 3 or earlier document is encountered;
* When an HTML 4.0 Transitional or Frameset document type declaration is used and a system identifier (URI) is not present;
* When an SGML comment or other unrecognized content appears before the document type declaration, or if there are errors elsewhere in the document;
* Internet Explorer 6 also uses quirks mode if there is an XML declaration prior to the document type declaration. [cite web | url=http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx | title=!DOCTYPE | accessdate=2007-01-13 "The following examples show how to use the !DOCTYPE declaration to specify the DTD a document conforms to, and to switch Internet Explorer 6 and later to standards-compliant mode."]

Various workarounds have been devised to force Internet Explorer versions 5 and earlier to display Web pages correctly. These workarounds generally exploit unrelated bugs in Internet Explorer’s CSS selector processing in order to hide certain rules from the browser. The best known of these workarounds is the “box model hack” developed by Tantek Çelik. Çelik developed this idea during his time at Microsoft while working on Internet Explorer for the Macintosh, which is not affected by the bug. It involves specifying a width declaration for Internet Explorer for Windows, and then overriding it with another width declaration for CSS-compliant browsers. This second declaration is hidden from Internet Explorer for Windows by exploiting other bugs in the way that that browser parses CSS rules. The implementation of these CSS “hacks” has been further complicated by the public release of Internet Explorer 7, which has had some issues fixed, but not others.

Box model hacks have proven unreliable because they rely on bugs in browsers’ CSS support that may be fixed in later versions. For this reason, some Web developers have instead recommended either avoiding specifying both width and padding for the same element or using conditional comment and/or CSS filter to work around the box model bug in older versions of Internet Explorer. [cite web | url=http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/ | title=Internet Explorer and the CSS box model | author=Roger Johansson | date=2006-12-21 | work=456 Berea Street | accessdate=2007-01-14 ] [cite web | url=http://virtuelvis.com/archives/2004/02/css-ie-only | title=Hack-free CSS for IE | author=Arve Bersvendsen | month=February | year=2004 | work=Arve Bersvendsen's weblog | accessdate=2007-01-16 ]

upport for Internet Explorer's box model

Web design professionals Douglas Bowman and Ethan Marcotte have stated that the original Internet Explorer box model actually represents a better, more logical approach based on common sense. [ [http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/douglas-bowman/ Vorsprung durch Webstandards | Douglas Bowman declares his love to CSS … ] ] [ [http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/ethan-marcotte/ Vorsprung durch Webstandards | Ethan Marcotte declares his love to CSS … ] ] An example given by Peter-Paul Koch is a physical, real-world box, whose dimensions always refer to the box itself, including potential padding, but never its content. [ [http://www.quirksmode.org/css/box.html CSS2 - Box model tweaking ] ] In CSS designs, this definition allows the exact application of both relative dimensions and absolute padding to any given box, which is not possible with the W3C model without workarounds. [ [http://www.washington.edu/webinfo/snippets/css/boxmodel.html CSS Box Model ] ] Peter-Paul Koch also says that this box model is more useful for graphic designers, who create designs based on the visible width of boxes rather than the supposed width of their content. [ [http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/peter-paul-koch/ Vorsprung durch Webstandards | Peter-Paul Koch declares his love to CSS … ] ] Another argument, given by Bernie Zimmermann in support of the Internet Explorer box model, is its closeness to the definition of cell dimensions and padding in the HTML table model, as defined by the W3C and implemented in most browsers. [ [http://www.bernzilla.com/item.php?id=33 Box Model Enlightenment, Bernie Zimmermann ] ]

In some early CSS3 [http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-box-width Box Model Specification] and [http://www.w3.org/TR/2004/CR-css3-ui-20040511/#box-sizing Basic User Interface Module] drafts, the W3C considered an explicit choice of box models via proposed box-width and box-height properties. These are not included in the [http://www.w3.org/TR/css3-box/ current CSS3 draft] .

References

External links

* [http://tantek.com/CSS/Examples/boxmodelhack.html Tantek Çelik's description of the "box model hack"]
* [http://webdesign.about.com/od/css/a/aaboxmodelhack.htm Getting Internet Explorer to Play Well with CSS] - article on about.com that outlines various ways to get around box model problem and other IE bugs.
* [http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html Modified Simplified Box Model Hack]
* [http://msdn2.microsoft.com/en-us/library/Bb250496 Cascading Style Sheet Compatibility in Internet Explorer 7] - MSDN article, July 2006.