Coffeehouse Thread

21 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

FFpadding vs. IEpadding

Back to Forum: Coffeehouse
  • User profile image
    jsampsonPC

    Will the padding-war ever be resolved in IE and FF? I don't know who's doing it wrong here, but I would really LOVE to have some resolution Smiley

    Updated: Removed the table example and replaced it with <div> example
    <div style="width: 20px; padding: 5px;">
        Hello World
    </div>

    In IE the overall width of that div will be 30, because padding in IE causes the width of the parent to be increased, whereas padding in FF causes the usable space to decrease..keeping the parent width fixed.

    I may have that backwards, but I believe that's how it works - what's the future for this possible bug?

  • User profile image
    Cybermagell​an

    jsampsonPC wrote:

    <table width="20">
        <tr>
           <td style="padding: 5;">Hello World!</td>
        </tr>
    </table>


    Ewww a table...Noes!!!!

    Ergh, what are you using this for? Why is CSS so wrong for your application? and what ever happened to "cellpadding"?

  • User profile image
    jsampsonPC

    eh...not the response I was wanting Smiley I replace the table-example with a div-example... Smiley
    You can put the Pepto-bismol away Smiley

  • User profile image
    Cybermagell​an

    jsampsonPC wrote:
    
    Updated: Removed the table example and replaced it with <div> example
    <div style="width: 20px; padding: 5px;">
        Hello World
    </div>


    I may be wrong however that should be 30 anyways....

    width of 20 + padding of 5 on each side (10) = 30

    I'm not too concerned about all this however I'm a visual person, maybe screenshot for us?

  • User profile image
    Harlequin

    What does it do in IE7?

  • User profile image
    jsampsonPC

    Harlequin wrote:
    What does it do in IE7?


    I don't know Smiley Most of the world has 6, so it's pretty much my main concern right now.

  • User profile image
    jsampsonPC

    Cybermagellan wrote:
    jsampsonPC wrote:
    Updated: Removed the table example and replaced it with <div> example
    <div style="width: 20px; padding: 5px;">
        Hello World
    </div>


    I may be wrong however that should be 30 anyways....

    width of 20 + padding of 5 on each side (10) = 30

    I'm not too concerned about all this however I'm a visual person, maybe screenshot for us?

    I think you're missing the point Smiley

    If you wanted a <div> to be 200 pixels wide, you would write it like this:

    <div style="width: 200px">
        Content here
    </div>

    Now, "Content here" will be touching the edge of the <div>. So you add a padding to seperate the text from the <div> edge.

    <div style="width: 200px; padding: 5px;">
        Content here
    </div>

    Okay, the text is no longer touching..but in IE..my div is 210 pixels wide now! In FF, it's still 200 pixels wide.

    Padding in IE causes the parent's width to increase, which isn't desirable. FF padding constricts the content-space, making it wrap in a lesser value, which is what the user wants when they set a width, and a padding value.

    IE delivers undesireable effects, and I want to know why Smiley

  • User profile image
    Harlequin

    jsampsonPC wrote:
    
    Harlequin wrote: What does it do in IE7?


    I don't know Most of the world has 6, so it's pretty much my main concern right now.


    But you also asked about the future of this bug. The future would be IE7.

  • User profile image
    Rowan

    In Quirks mode IE6 does not treat padding correctly, padding is supposed to increase the size of an element. Firefox and IE can both do the same thing, all you have to do is use a valid doctype.

    http://www.w3.org/QA/2002/04/valid-dtd-list.html

    Edit: more info

  • User profile image
    Rotem Kirshenbaum

    jsampsonPC wrote:
    
    <div style="width: 20px; padding: 5px;">
        Hello World
    </div>


    Did you try using the Margin attribute ?

    Rotem

  • User profile image
    Sven Groot

    Rowan wrote:
    In Quirks mode IE6 does not treat padding correctly, padding is supposed to increase the size of an element. Firefox and IE can both do the same thing, all you have to do is use a valid doctype.

    Indeed. Always use a strict mode doctype. For your example both FF and IE will correctly use a 30px wide box in strict mode. More info about IE6 behaviour with different doctypes.

  • User profile image
    W3bbo

    Cybermagellan wrote:
    
    jsampsonPC wrote:
    <table width="20">
        <tr>
           <td style="padding: 5;">Hello World!</td>
        </tr>
    </table>


    Ewww a table...Noes!!!!

    Ergh, what are you using this for? Why is CSS so wrong for your application? and what ever happened to "cellpadding"?


    That example won't work anyway, he didn't specify a unit for the padding property's value. IE incorrectly converts unit-less values into pixel units, whereas Firefox correctly sets it to zero.

  • User profile image
    Custa1200

    Sven Groot wrote:

    Rowan said:
    In Quirks mode IE6 does not treat padding correctly, padding is supposed to increase the size of an element. Firefox and IE can both do the same thing, all you have to do is use a valid doctype.

    Indeed. Always use a strict mode doctype. For your example both FF and IE will correctly use a 30px wide box in strict mode. More info about IE6 behaviour with different doctypes.


    IE 5.5 and below will not.

    Any web developer out there that does not have a doctype as the first thing on their page should be shot.

  • User profile image
    Sven Groot

    Custa1200 wrote:
    IE 5.5 and below will not.

    No, but supporting IE5.5 and below isn't part of my goals anymore. I occasionally check how the site looks in them, and if it's even vaguely readable it's all right. My visitor stats suggest that's the right decision, since pretty much even Opera outnumbers IE5.x by now.
    Custa1200 wrote:
    Any web developer out there that does not have a doctype as the first thing on their page should be shot.

    Channel9 does not use a doctype. :O I hope the new version will.

  • User profile image
    Human​Compiler

    Sven Groot wrote:
    
    Custa1200 wrote: Any web developer out there that does not have a doctype as the first thing on their page should be shot.

    Channel9 does not use a doctype. I hope the new version will.


    10 Code Base wrote:


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



    Yes, the new Channel 9 will.

  • User profile image
    AdityaG

    I use XHTML 1.1 on most of my layouts and the padding and margins always Just Work (tm). The only things I have to fiddle around with are minor margin shifts and such in IE when I have lots of divs nested.

    And the padding is SUPPOSED to increase the width/height of the div

  • User profile image
    W3bbo

    AdityaG wrote:
    I use XHTML 1.1 on most of my layouts and the padding and margins always Just Work (tm). The only things I have to fiddle around with are minor margin shifts and such in IE when I have lots of divs nested.


    Naughty, naughty Wink

    You cannot legally serve XHTML1.1 unless its MIME type is "application/xhtml+xml"

  • User profile image
    Human​Compiler

    Yup, that's what we do too.  Adam does our CSS and we do "hacks" for the little details that don't work the same to get each browser to work just right.

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.