#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    37
    Rep Power
    12

    CSS padding question


    so i decided to twiddle with some css layout instead of using the ol' tables. my code is certainly cleaner, but doesn't seem to want to work the same on mozilla as it does on IE, specifically with the way the padding attributes are handled.

    in mozilla, why is it when i specify a padding-left or padding-right attribute, the width of the div equals the width + padding-right + padding-left, and in IE, the width of the div is width? example:

    #centerContent {
    width: 620px;
    float: left;
    background: #505050;
    padding-top: 13px;
    padding-bottom: 13px;
    padding-left: 8px;
    padding-right: 8px;
    }

    in mozilla, the actual width of this div is 636px. in IE, it's 620px. i thought the padding just made sure the text had a buffer between it and the div boundary.

    some clarification, pweeeze? thanks a bunch.
  2. #2
  3. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1100
    in mozilla, why is it when i specify a padding-left or padding-right attribute, the width of the div equals the width + padding-right + padding-left, and in IE, the width of the div is width?
    B/c the folks over at M$ can't read. The way Mozilla handles it is correct according to the W3C's specifications. As with most things, there is a workaround ... http://glish.com/css
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    37
    Rep Power
    12
    that's the site that i've been using for examples. i looked in the hacks section but couldn't find the fix. i'm using IE 6 and the fixes all refer to IE5.x.

    thanks for the help.
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    make sure you use a doctype that triggeres the browers to render the page in standards-compliant mode.

    http://www.hut.fi/u/hsivonen/doctype.html
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    37
    Rep Power
    12
    i used

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

    and it fixed one thing in IE, but broke another. apparently, IE cannot (or will not) render a DIV that's less than 5 px wide. mozilla renders it fine, but when i try and render a DIV with a width of 3px, IE renders it as 5px. eh, it's something i can live with, but i'll be happy in a few years when all the browsers render code the same (yes, i'm not holding my breath).

    thanks a bunch!
  10. #6
  11. No Profile Picture
    Standards User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    146
    Rep Power
    12
    Originally posted by yeah-yeah
    ... i'll be happy in a few years when all the browsers render code the same (yes, i'm not holding my breath).

    thanks a bunch!
    LOL! Me too! Although I think people have been saying that for years. Hopefully with "standards compliant" becoming more and more important, it won't be much longer. But like you, I won't hold my breath.

IMN logo majestic logo threadwatch logo seochat tools logo