SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a really simple question (because I'm feeling paranoid)

    It's rather suddenly become important to make sure I understand how padding and margins work. Say I define a width of 300px for a div then add 10px of padding to the left and right sides. Does the padding come out of the 300px already defined or does it add to the width of 300px (and become 320px in width). I'm almost positive it's the former, but I want to be sure. How exactly do margins differ from this?

  2. #2
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is actually the issue of the proper box model. In gecko browsers, the proper box model is implemented, in a sense that paddings and borders are added on top of the originally defined dimensions. For example, 200 width + 20 padding + 2px border = 244px in width in total. However, early versions of IE did not have this proper box model, and this can be triggered in IE 6 by not placing in a DTD thus starting its quirk mode. In that case, paddings and borders are established WITHIN the originally defined width.

    For more information, you can take a look at a more visual example here: http://www.w3.org/TR/css3-box/ <- that's the recommended implementation of W3C that's currently being adapted by all major browsers.
    In search of the clouds...and maybe some work

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So in a mozilla browser it would add to the total size of a container area, but IE does what wrong? And how can you fix it?

    I have a div (#main) that must be exactly 600px wide, so right now I have it at 568px with 16px padding on the left and right sides. It's floated right of a left floating sidebar 326px wide (inside a 972px container). There are no issues in FF/Safari, but IE won't display the div beside the sidebar (I assume because of padding issues). Instead it appears under the side bar.

    quick css snip
    Code:
    #sidebar {
        width:326px;
        background-color:#d2f0fb;
        background-image:url("/images/sbbg.gif");
        float:right;
        overflow:hidden;
        margin-right:10px;
        padding-bottom:5px;
        border:2px solid #7fcff0;
        position:relative;
        display:inline;
        clear:both;
        font-family: arial, helvetica, sans-serif;
        }
    
    #main{
        width:568px;
        position:relative;
        padding-left:16px;
        padding-right:16px;
        padding-bottom:2em;
        float:left;
        display:inline;}
    So how do I get IE to play nice with it?

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    kefeso has explained it spot on....

    You've actually got a little bit confused and it is actually the first one in your description which is correct.

    Have a look at kefeso's link but also have a look at here http://tantek.com/CSS/Examples/boxmodelhack.html which explains what the box model is and also how you can implement it so that it works in all browsers

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE6+ will play nicely with the box model aslong as you have a full doctype

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    IE5.5 and below will use the broken box model which can be fixed using the link in my post above

    If you've got a valid doctype and it still isn't working in IE6 then your problem is being caused by something else.

  6. #6
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the doctype I was using was

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  7. #7
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Crap...changing the DTD didn't help.

    *update*

    The quick addition of overflow:hidden stopped it from dropping. Of course, now my search bar vanishes off the top nav bar, but hey, you can't win'em all (it's a 5 float layout for crying out loud). That leaves me with two minor problems left. Life is good.
    Last edited by Ghosty; Oct 31, 2006 at 11:03. Reason: update

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're using that doctype then the box model will be working exactly the same for IE6, Firefox and all other modern browsers so there must be something else wrong with your code. If you can post the HTML and CSS or a link to the site then I'm sure we'll be able to help

  9. #9
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You beat me! Any way a simple overflow:hidden addition stopped it from dropping my floats. Mystery solved. On to the next bug.

  10. #10
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No idea without seeing the example.... you can obviously use floats and display: inline to position things next to each other but from your description it's difficult to tell.

    You could also be experiencing the double left margin bug in IE which you can fix by applying display: inline to the floated div but without seeing it I've no idea

  11. #11
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I wasn't sure what the problem was at first.


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
  •