Internet Explorer box model bug

File:W3C and Internet Explorer box models.svg

The difference in how width is interpreted between the W3C and Internet Explorer box models

The Internet Explorer box model bug is a software bug in the implementation of Cascading Style Sheets in earlier versions of Microsoft’s Internet Explorer web browser for Microsoft Windows. Internet Explorer 6 and newer are not affected in their standards-compliant mode, but for compatibility reasons, the bug is still present when a page is rendered in "quirks mode". The bug does not affect Internet Explorer for Mac, though that browser was discontinued by Microsoft in 2006.

Background

The Cascading Style Sheets (CSS) specification describes how elements of web pages are displayed by graphical browsers. Section 4 of the CSS1 specification defines a "formatting model" that gives block-level elements—such as p and blockquote—a width and height, and three levels of boxes surrounding it: padding, borders, and margins. While the specification never uses the term "box model" explicitly, the term has become widely used by web developers and web browser vendors.

Before HTML 4 and CSS, very few HTML elements supported both border and padding, so the definition of the width and height of an element was not very contentious. However, it varied depending on the element. The HTML width attribute of a table defined the width of the table including its border. On the other hand, the HTML width attribute of an image defined the width of the image itself (inside any border).^{[citation needed]} The only element to support padding in those early days was the table cell. Width for the cell was defined as "the suggested width for a cell content in pixels excluding the cell padding."

CSS introduced margin, border and padding for many more elements. It adopted a definition width in relation to content, border, margin and padding similar to that for a table cell. This has since become known as the W3C box model.

At the time, very few browser vendors implemented the W3C box model to the letter. The two major browsers at the time, Netscape 4.0 and Internet Explorer 4.0 both defined width and height as the distance from border to border. This has been referred to as the traditional or the Internet Explorer box model.

Bug

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 visible element, with the padding, borders, and margins applied afterward. Internet Explorer 5 includes the content, padding and borders within a specified width or height; this results in a narrower or shorter rendering of a box.

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. 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
• When there are errors anywhere in the document
• Internet Explorer 6 also uses quirks mode if there is an XML declaration prior to the document type declaration.

Various workarounds have been devised to force Internet Explorer versions 5 and earlier to display Web pages using the W3C box model. 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, a former Microsoft employee who developed this idea while working on Internet Explorer for the Macintosh. 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, causing undesired results in pages using these hacks.

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 filters to work around the box model bug in older versions of Internet Explorer.

Support 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 in their opinions. 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. 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. 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 width of their content. 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.

The W3C is also including a "box-sizing" property in CSS3 called "border-box", which calculates the height and width of the element in the same fashion as quirks mode. Internet Explorer 8, Opera 7.0 and later, and Konqueror 3.3.2 and later support the CSS3 box-sizing property. Mozilla browsers such as Mozilla Firefox support the same functionality using a proprietary "-moz-box-sizing" property , and WebKit browsers such as Apple Safari and Google Chrome support it using a proprietary "-webkit-box-sizing" property.

Box model issues in other areas

While the box model normally only pertains to CSS design, and current versions of most browsers have implemented the standard box model for CSS, a box model issue still exists in another browser feature, namely the definitions of offsetX and offsetY in CSSOM View Module. The CSSOM View Module is used in querying the actual dimensions of rendered elements and mouse positions in JavaScript. The standard specifies the use of "padding box" dimensions for offsetX and offsetY; however, currently, most major browsers use other box models.

External links

• Tantek Çelik's description of the "box model hack"
• 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.
• Cascading Style Sheet Compatibility in Internet Explorer 7 - MSDN article, July 2006.
• CSS Box Model differences in Firefox and Internet Explorer - Further explanation of the rendering differences between Mozilla Firefox and Internet Explorer.