...

View Full Version : Clarification for Box Model & IE Quirks Mode



babybackriib
01-16-2008, 09:03 PM
Hello,

I would appreciate if someone could clarify a couple things for me:

1. BOX MODEL - one source says the declared width of an element is the width of it's content area, not including it's padding and borders, but that IE subtracts the padding & borders from the declared width. But another source includes margins along with padding & borders. Are margins included in the width of a box model or is it just padding & borders?

2. IE QUIRKS MODE - one source says IE goes into Quirks mode if a partial or no DOCTYPE is used. But another source says that IE 6 will go into Quirks mode if anything other than a STRICT DOCTYPE is used (in addition to a partial or no DOCTYPE). Is this true?

I'm getting conflicting information from different sources! Any input is appreciated, thank you.

rmedek
01-16-2008, 09:59 PM
Hi there BB,



1. BOX MODEL - one source says the declared width of an element is the width of it's content area, not including it's padding and borders, but that IE subtracts the padding & borders from the declared width. But another source includes margins along with padding & borders. Are margins included in the width of a box model or is it just padding & borders?

The total width (left-to-right) of an element according to the box model is:

left margin + left border + left padding + width of the element + right padding + right border + right margin

The same goes for height. So, the total width of an element with:


#element {
width: 100px;
padding: 0 10px;
margin: 0 10px;
border: solid 1px #000;
}

…is 142px. IE 6, unless operating in Strict mode, will subtract rather than add the extra stuff to the width. In other words, IE 6 thinks 100px should be the total width, the W3C thinks 100px should be the width of the content only.


IE QUIRKS MODE - one source says IE goes into Quirks mode if a partial or no DOCTYPE is used. But another source says that IE 6 will go into Quirks mode if anything other than a STRICT DOCTYPE is used (in addition to a partial or no DOCTYPE). Is this true?


No. There are several cases where IE 6 won't go into Quirks mode. But the alternative is something where it's "Almost Strict," and some elements get parsed differently. Check this article (http://www.quirksmode.org/css/quirksmode.html) for a great explanation.

Hope that helps…

felgall
01-16-2008, 10:00 PM
If you use a strict doctype (which is what you should be using for new web pages anyway) then the answers to your questions don't really matter.

IE5.5 and IE6+ in quirks mode gets the padding and borders wrong in calculating the width. Margins are never part of the width in any mode.

IE goes into quirks mode if no doctype or an invalid doctype is specified (it must not be preceded by anything else in IE6). IE still behaves differently depending on whether a transitional or strict doctype is used with regard script processing even though both place it in standards mode.

babybackriib
01-16-2008, 10:19 PM
Ok, this is why I'm confused about the Box Model. First I'm told:


The total width (left-to-right) of an element according to the box model is:

left margin + left border + left padding + width of the element + right padding + right border + right margin

and then I'm told:


IE5.5 and IE6+ in quirks mode gets the padding and borders wrong in calculating the width. Margins are never part of the width in any mode.

Using the previous example,


#element {
width: 100px;
padding: 0 10px;
margin: 0 10px;
border: solid 1px #000;
}

The total width for this element is 142px (including padding, borders, and margins). The "width" declaration for IE 5 and 6 (in quirks) is 142px. That includes the margins... is this correct? Or is it supposed to be 122px, without the margins?

Regarding DOCTYPEs: if IE is using a transitional, partial, or no DOCTYPE that it is in Quirks mode. If IE is using a strict and complete DOCTYPE, it is in standards mode. Is this correct? I do use Strict DOCTPEs, but I don't like getting conflicting information.

rmedek
01-16-2008, 10:44 PM
Regarding DOCTYPEs: if IE is using a transitional, partial, or no DOCTYPE that it is in Quirks mode. If IE is using a strict and complete DOCTYPE, it is in standards mode. Is this correct?

No.


If IE is using no or a partial Doctype, it is in Quirks mode
If IE is using a Strict Doctype without an XML prolog, it is in Strict
Everything else depends, but for the most part if you use a complete Doctype it will be in "almost" strict.


Check this link (http://hsivonen.iki.fi/doctype/) in the article I mentioned. It points to a graph which shows how all browsers parse documents.

As far as the Box Model, this is it:


The total width (left-to-right) of an element according to the box model is:

left margin + left border + left padding + width of the element + right padding + right border + right margin

That is how it's supposed to be. IE 6+ in Strict mode will use this model.

Some more links for you:


http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
http://tantek.com/CSS/Examples/boxmodelhack.html
http://www.hicksdesign.co.uk/boxmodel/

felgall
01-17-2008, 02:29 AM
I don't see any conflict in the above comments.

The overall width of an element on the page with a correct box model will be:

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

With IE in quirks mode the overall width of an element will be:

margin-left + width + margin-right

In neither case are the margins included in the value supplied as the width (which is supposed to be the content only but for IE includes the padding and borders as well). Perhaps you are getting the element width and the width attribute mixed up.

IE is in "standards" mode with a valid transitional or strict doctype BUT different fields in the browser object model are populated depending on whether a strict doctype is used or not and so how you can dynamically position things within the page will still need to change if you switch from transitional to strict.

babybackriib
01-17-2008, 02:40 AM
I know the difference between the element width and the width attribute. I also know that margins are part of the CSS specs for the box model, I just wasn't clear if the margins were included in the declared width for IE 5 (and 6 in Quirks) or not.

Everyone words it differently and sometimes it sounds as if the margins are included and sometimes as if they aren't, but thank you for clearing it up for me!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum