All elements are treated as boxes: paragraphs, headings, block quotes, lists, list items, and so on. Even inline elements like <em> and links are treated by CSS as boxes.
According to the W3C definition of a box created using CSS, the width and height define the width and height of only the content area (the area where images and other objects are displayed). The apparent width and height, or the total width and height that the element takes up in the design, include the content area plus the padding and border sizes. So, the apparent width would be calculated in the following way(Margin is unique in that it doesn't affect the size of the box itself per-say, but it affects other content interacting with the box, and thus an important part of the CSS box model.):
width(content) + left padding + right padding + left border + right border = width(apparent)
Unfortunately, Microsoft Internet Explorer through version 5.5 defined width and height values as the apparent width and height (including padding and borders). This effectively subtracts the padding and border sizes to determine the content width and height:
width(apparent) - left padding - right padding - left border - right border = width(content)
So, given the following CSS:
#object1 {
border: 5px solid #000;
padding: 10px;
width: 100px;
}browsers using the W3C standard (Firefox, Safari, Opera) will set the content area to 100 pixels wide, but will have an apparent width of 130 pixels:
100 + 5 + 5 + 10 + 10 = 130
Whereas Internet Explorer 5.5 and earlier will set a content area 70 pixels wide and an apparent width of 100 pixels:
70 + 5 + 5 +10 + 10 = 100
Recent versions of Internet Explorer (6 and later) fix this problem by following the W3C standards.
The solution is: Turning Off Quirks Mode.
Quirks Mode
Modern browsers have at least two modes in which they can display content:
- Standards-compliant mode
- Quirks mode
In standards-compliant mode, the browser does its best to display the page according to the latest CSS standards. In quirks mode, the browser displays the page as if it were an older version of the same browser. The purpose of quirks mode is to make pages that were designed for the old browsers display the same in the newer browsers.
You won't find much difference between quirks mode and standards-compliant mode in Mozilla, Opera or Safari, but you may see big differences in Internet Explorer.
Turning Off Quirks Mode
By default, quirks mode is on. It can be turned off by adding the correct DOCTYPE declaration at the top of the HTML page. The following DOCTYPE declarations will turn on standards-compliant mode for all modern browsers:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
One gotcha in Internet Explorer is that quirks mode is always enabled if you include an XML declaration (<?xml version="1.0"?>), so we recommend you do not include one.