Box Model issues
Article ID: KB101749
When testing for browser compatibility in IE5 or IE6, you may run into issues
where the dimensions of an element in one browser doesn't match the dimensions
in a different browser like IE7, FireFox, or Opera. For example, an element may
seem much wider in IE5 or IE6, throwing off the layout of the page. What's
happening is a difference in how some browsers interpret dimensions, borders,
and padding defined in CSS.
A quick overview of CSS and dimensions. Cascading style sheets allow one to
define properties for various HTML elements. You can define widths and heights
for these elements if you wish. You can also define a border, which would put a
line around the element, and specify the width of the border. You can also
define padding, which is the space between the border and the actual content in
the box. CSS also allows you to define the margin property, which is the space
outside of the border, affecting how close the elements lies to other elements.
This diagram below illustrates the CSS "box model," which determines how
browsers should treat the dimensions of a box.
The width property defines the actual area that the content will
fit inside, and padding, border, and margin
amounts are added on outside of the width. (You can see that a width of 100%
with padding and border values would be problematic... so watch your values
carefully!)
The Problem with IE5
Current browsers will do the right thing with your dimensions, paddings,
margins, and borders as described above. However, Internet Explorer 5 interprets
the box model incorrectly by taking the width to be the total width,
then subtracting the padding and border to give you the remaining content area
width. So the exact same code below would look different in Internet Explorer 5
and other current browsers:
selector {
width: 280px;
height: 180px;
padding: 10px;
}
The diagram on the left shows the correct rendering of the code, while the
diagram on the right shows how IE5 messed up the dimensions of the box:
IE6 and higher
IE6 and higher do use the correct box model (left side of the above diagram)
but also can run on what is called "quirks mode." In "quirks mode," the browser
will use the [incorrect] IE5 box model with the wider total width. For IE6 and
higher to not run in quirks mode, the web page needs to have a
DOCTYPE defined at the very top of the page. Inserting a comment before the
DOCTYPE will
cause Internet Explorer to run in quirks mode.
Document in "strict mode" has the DOCTYPE at the top of the HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
...
Document in "quirks mode" has a comment before the DOCTYPE:
<!-- a comment here causes IE6 and IE7 to work in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
...
If your site looks as it should in FireFox, but is displaying incorrectly in
IE6 or IE7, it is very likely that the DOCTYPE is not at the top of the HTML
code as it should be.
The Box Model Hack
In order to get the code to work for both IE5 and current browsers, many
developers use the Box Model Hack, which involves this code (you'll also want to
make sure that you have a DOCTYPE defined at the top of your HTML code so that
IE6 and IE7 are not in quirks mode):
voice-family: "\"}\"";
voice-family:inherit;
This code causes IE5 to ignore what comes after it. So in the code below, IE5
and current browsers such as FireFox and IE6+ look at the first width and height
(300px by 200px). The padding is then applied. When IE5 hits the box model hack,
it ignores the rest and moves on. Other browsers aren't confused by that, so
they see the second width and height (280px by 180px) and use those dimensions
as the correct dimensions. The last line of code is a special line of code to
allow the Opera browser to have the proper dimension as well, because Opera acts
like IE5 and ignores what comes after the box model hack.
selector {
width: 300px;
height: 200px;
padding: 10px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 280px;
height: 180px;
}
html>body selector { width: 280px; height: 180px; }
So, you will need to add the hack to your CSS and make sure the widths and
heights are defined properly for the different browsers to interpret them.
Authors and Contributors:
Corrie Haffly
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al0/kb101749.htm
permalink to this article:
http://www.pixelmill.com/support/kb101749.htm
Back to top