Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Clarification for Box Model & IE Quirks Mode

    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.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hi there BB,

    Quote Originally Posted by babybackriib View Post
    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:

    Code:
    #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 for a great explanation.

    Hope that helps…

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,589
    Thanks
    0
    Thanked 644 Times in 634 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New Coder
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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,

    Code:
    #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.

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by babybackriib View Post
    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 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:


  • Users who have thanked rmedek for this post:

    babybackriib (01-17-2008)

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,589
    Thanks
    0
    Thanked 644 Times in 634 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    babybackriib (01-17-2008)

  • #7
    New Coder
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •