SitePoint Sponsor

User Tag List

View Poll Results: Which box model works best?

Voters
8. You may not vote on this poll
  • Internet Explorer

    2 25.00%
  • W3 standards

    6 75.00%
Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast nelovishk's Avatar
    Join Date
    Dec 2004
    Location
    Guadalajara, México
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Standards vs. IE box model

    Hi,

    Recently, I learned that according to the standards, the padding and border values should be ADDED to the width of a block element. Older versions of IE and IE6 in non standards-compliant mode, however, calculate the width of an element by adding it's css width, padding, and border values.

    Overall, I find Microsoft's approach to make more sense (and thats weird on me). I might be wrong, though. For example, if you want to set a DIV to 100% width and have a padding of 20px, that would cause the width of the element to be 100%+40px+borders in standards-compliant browsers, but would still be 100% width with the padding inside in IE.

    Here's an example to illustrate this (try it on FireFox and IE):
    http://www.unomexico.com/examples/box-mode.html

    There's no problem with the standard approach when you're working with pixel measures, but when working with percentages, IMO, is a pain in the ***

    More info on this:
    http://msdn.microsoft.com/library/de...hancements.asp
    http://www.positioniseverything.net/...box-model.html
    See any mistakes? Please tell me! I need to improve my English.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Both systems have their advantages and disadvantages which is why the w3c has a working draft which will allow the specifying of either box model through a property called box-sizing.

    In the case of percentages and 100% widths where you want pixel padding added then yes the "broken box model" makes more sense. In other cases it makes little difference.

    Paul

  3. #3
    SitePoint Enthusiast nelovishk's Avatar
    Join Date
    Dec 2004
    Location
    Guadalajara, México
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's great to hear about that draft, Paul. We'll have to wait until it's implemented in browsers, but that's something. And it makes the poll totally unnecesary

    Thanks for pointing that out, Paul.
    See any mistakes? Please tell me! I need to improve my English.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I definitely prefer the W3C model. With Microsoft's model, you can't create a container that precisely encloses a 130x80 pixel image, using 1em of padding and a 1px border around the whole thing.

    If you wan't a DIV width 100% width and 20px padding, just do it like this:
    Code:
    #your-id {padding:20px}
    (Unless the DIV is positioned or floating.)

    A common case for Microsoft's model is that you need a specific width for a container, and then some padding. Most people making that kind of layouts use only pixels, so it's a simple subtraction. But even if you don't, you just set the padding on the descendant elements instead of the container.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Enthusiast nelovishk's Avatar
    Join Date
    Dec 2004
    Location
    Guadalajara, México
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    But even if you don't, you just set the padding on the descendant elements instead of the container.
    Makes sense thanks for the suggestion Tommy, I didn't think about that option before.
    See any mistakes? Please tell me! I need to improve my English.


Bookmarks

Posting Permissions

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