SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Padding and margins consistent in both FF and IE please

    Has anyone found a way of making padding and margins consistent in both FF and IE please?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Padding and margin are pretty consistent in both once you set them so you will need to be more explicit. You don;t usually need t do anything assume you have a full valid doctype.

    If you are talking about element defaults then set them to what you need and then they will be exact. A small reset (not the bloated ones) will do to set some standard defaults.

    If you are talking about bugs (percentage margin or double margin bugs in Ie6) then they are specific issues that need to be addressed on a case by case basis.

    It all depends on where you see this as a problem exactly?

  3. #3
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, the doctype is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    and the padding and margins for table elements is not consistent in FF 4 or IE7

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

    The doctype's fine so you should be ok to go.

    Here's an example that is pixel perfect across IE, Firefox and Safari.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type"text/css">
    table{
        width:760px;
        margin:0 auto;
        padding:0;
        border-collapse:collapse;
        background:#fcf;
        line-height:1.0;
        font-size:100%;
    }
    th{font-weight:bold}
    td,th{
        padding:25px;
        border:1px solid #000;    
        vertical-align:middle;
        text-align:center;
    }
    </style>
    </head>
    <body>
    <table>
        <tr>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
    </table>
    </body>
    </html>
    You'll have to provide an example of where it's not working for you for us to debug further as the basic structure as above is fine.
    Last edited by Paul O'B; Jun 5, 2011 at 12:30. Reason: silly mistake

  5. #5
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    The doctype's fine so you should be ok to go.

    Here's an example that is pixel perfect across IE, Firefox and Safari.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type"text/css">
    table{
        width:760px;
        margin:0 auto;
        padding:0;
        border-collapse:collapse;
        background:#fcf;
        line-height:1.0;
        font-size:100%;
    }
    th{font-weight:bold}
    td,th{
        padding:25px;
        border:1px solid #000;    
        vertical-align:middle;
        text-align:center;
    }
    </style>
    </head>
    <body>
    <table width="100%">
        <tr>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
    </table>
    </body>
    </html>
    You'll have to provide an example of where it's not working for you for us to debug further as the basic structure as above is fine.
    Thanks Paul, this is helping a lot. Two things though, how would you do it pixel perfect for column widths please? Also, in the css, the table was 760px wide, and then further down in the html, it was 100%??

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Dez View Post
    Thanks Paul, this is helping a lot. Two things though, how would you do it pixel perfect for column widths please?
    If you weren't worried about IE6 and 7 you could do much the same as ie8 and others seem to agree and display it much the same. However IE6 and 7 add the padding to the cell width so the whole thing gets bigger so the only solution is to add an inner div for the padding if pixel perfection is required.

    You should always work out the total width for the table just to be sure.

    e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type"text/css">
    table{
        width:856px;
        margin:0 auto;
        padding:0;
        border-collapse:collapse;
        background:#fcf;
        line-height:1.0;
        font-size:100%;
        table-layout:fixed;
    }
    th{font-weight:bold}
    td,th{
        padding:0;
        border:1px solid #000;    
        vertical-align:middle;
        text-align:center;
    }
    .col1{width:100px}
    .col2{width:150px}
    .col3{width:125px}
    .col4{width:225px}
    .col5{width:250px}
    .cellwrap{padding:25px;}
    
    </style>
    </head>
    <body>
    <table>
        <colgroup>
        <col class="col1" />
        <col class="col2" />
        <col class="col3" />
        <col class="col4" />
        <col class="col5" />
        </colgroup>
        <tr>
            <th scope="col"><div class="cellwrap">Header</div></th>
            <th scope="col"><div class="cellwrap">Header</div></th>
            <th scope="col"><div class="cellwrap">Header</div></th>
            <th scope="col"><div class="cellwrap">Header</div></th>
            <th scope="col"><div class="cellwrap">Header</div></th>
        </tr>
        <tr>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
        </tr>
        <tr>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
        </tr>
        <tr>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
        </tr>
        <tr>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
        </tr>
        <tr>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
            <td><div class="cellwrap">Column</div></td>
        </tr>
    </table>
    </body>
    </html>
    If IE6 and 7 support isn't required then just add the padding to the td and remove the inner div.

    Also, in the css, the table was 760px wide, and then further down in the html, it was 100%??
    Aaarghh how did that get in there.

    Sorry I copied some table html for the quick demo and thought I'd stripped the rubbish out as there should be no width attribute in that table. The css would have over-ruled it anyway as it takes precedence of attributes other than the style tag. Just remove it.

  7. #7
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks Paul, it's all starting to make sense. If you wanted to make it totally consistent in the cell widths for FF3, FF4, IE6,7 and 8, what would you do then please?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Dez View Post
    Many thanks Paul, it's all starting to make sense. If you wanted to make it totally consistent in the cell widths for FF3, FF4, IE6,7 and 8, what would you do then please?
    I'd avoid padding on the cells but add it to inner elements instead and then ensure that the cell widths add up to the table width.

    Tables are a special case because they depend on content and will stretch even or shrink even when widths/heights are set which is why people who use tables for layout like them because they don't break so easily. However that same behaviour leads to inconsistency in cell size which is why the spacer gif evolved to force the issue.

    In my limited tests its usually only IE6 and 7 that differ but following the above example in my previous post things are pretty consistent.

    I suppose it all depends on what you are trying to do as usually it wouldn't make much difference if you allow the cells to size themselves depending on content.

  9. #9
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I'd avoid padding on the cells but add it to inner elements instead and then ensure that the cell widths add up to the table width.
    Okay, I'll take off the padding on cells, but what inner elements can you add it to please?

    Quote Originally Posted by Paul O'B View Post
    Tables are a special case because they depend on content and will stretch even or shrink even when widths/heights are set which is why people who use tables for layout like them because they don't break so easily. However that same behaviour leads to inconsistency in cell size which is why the spacer gif evolved to force the issue.
    Yep, am finding that even if the columns are all set at exactly the same width, they will auto adjust according to what length text is within them. Is there any way for cell widths to have EXACTLY the same widths, regardless of what text is in them please?

  10. #10
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dez View Post
    Is there any way for cell widths to have EXACTLY the same widths, regardless of what text is in them please?
    The table-layout: fixed in Paul's example should accomplish that.

  11. #11
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EarlyOut View Post
    The table-layout: fixed in Paul's example should accomplish that.
    Yep, that's correct, but as you can see, was referring to cell widths,

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Dez View Post
    Yep, that's correct, but as you can see, was referring to cell widths,
    If the contents are to be equally distributed between all available cells then remove the widths from the cells and table-layout:fixed will automatically evenly distribute the content. The fixed layout algorithm should make them equally divide assuming that you don't have oversized content in any one cell in which case that cell will most likely just push wider.

    Perhaps we need to see an example of what you are doing and why this is going to be an issue?

  13. #13
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, bit tricky to show content at the moment, but the trouble is, is that there's 4 tables, with varying lengths of text in all of the cells in all of the tables, and because the length of text in one table is wider than in other tables, it's pushing the relevant cell width wider than the cells in the other tables. Just looking for a way to make all columns to be exactly the same width, regardless of the length of text which is in the cells.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You should just be able to do this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type"text/css">
    table{
        width:760px;
        margin:0 auto;
        padding:0;
        border-collapse:collapse;
        background:#fcf;
        line-height:1.0;
        font-size:100%;
            table-layout:fixed;
    }
    th{font-weight:bold}
    td,th{
        padding:25px;
        border:1px solid #000;    
        vertical-align:middle;
        text-align:center;
       word-wrap:break-word;
    }
    </style>
    </head>
    <body>
    <table>
        <tr>
            <th scope="col">Header header header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
        </tr>
        <tr>
            <td>Column column column </td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
    </table>
    </body>
    </html>

  15. #15
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, perhaps I should expand a bit, as mentioned, trying to get the cells to be exact widths, but because of the lengths of some of the text within them, some of the column widths are changing. For example, all of the column widths should be:
    <thead>
    <tr>
    <th width="114px"><b>First column</b></th>
    <th width="170px"><strong>Second column</strong></th>
    <th width="186px"><b>Third column</b></th>
    </tr>
    </thead>

    Is there any way of the column widths always being the exact widths above, regardless of what is in them please?

    Thanks.

    Dez

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you don't have oversized content you can do it like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type"text/css">
    table{
        margin:0 auto;
        padding:0;
        border-collapse:collapse;
        background:#fcf;
        line-height:1.0;
        font-size:100%;
        table-layout:fixed;
    }
    th{font-weight:bold}
    td,th{
        padding:5px 10px;
        border:1px solid #000;    
        vertical-align:middle;
        text-align:center;
    }
    .col1{width:94px}/* 94px + 20px padding= 124px*/
    .col2{width:175px}/* 175px + 20px = 195px*/
    .col3{width:166px}/* 166px + 20px = 186px*/
    
    </style>
    </head>
    <body>
    <table>
        <tr>
            <th class="col1" scope="col">header</th>
            <th class="col2" scope="col">header</th>
            <th class="col3" scope="col">header</th>
        </tr>
        <tr>
            <td>Column Column Column Column Column </td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
    </table>
    </body>
    </html>
    The widths are added to the first row which sets the width for the whole table and if you use a class on the "th" itself instead of the col element I used before then all browsers add the padding in to the mix so you can make them all the same.


    However if you have fixed width content such as unbroken text then you will need to nest a div and apply a width to the div as well and then set word-wrap:break-word.

  17. #17
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by Paul O'B View Post
    If you don't have oversized content you can do it like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type"text/css">
    table{
        margin:0 auto;
        padding:0;
        border-collapse:collapse;
        background:#fcf;
        line-height:1.0;
        font-size:100%;
        table-layout:fixed;
    }
    th{font-weight:bold}
    td,th{
        padding:5px 10px;
        border:1px solid #000;    
        vertical-align:middle;
        text-align:center;
    }
    .col1{width:94px}/* 94px + 20px padding= 124px*/
    .col2{width:175px}/* 175px + 20px = 195px*/
    .col3{width:166px}/* 166px + 20px = 186px*/
    
    </style>
    </head>
    <body>
    <table>
        <tr>
            <th class="col1" scope="col">header</th>
            <th class="col2" scope="col">header</th>
            <th class="col3" scope="col">header</th>
        </tr>
        <tr>
            <td>Column Column Column Column Column </td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
        <tr>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
    </table>
    </body>
    </html>
    The widths are added to the first row which sets the width for the whole table and if you use a class on the "th" itself instead of the col element I used before then all browsers add the padding in to the mix so you can make them all the same.


    However if you have fixed width content such as unbroken text then you will need to nest a div and apply a width to the div as well and then set word-wrap:break-word.
    Many thanks Paul, will do some more work on this and come back to you.

  18. #18
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi Paul, thanks for your time on this. One thing, what's the bits in bold all about please?

    Code:
    .col1{width:94px}/* 94px + 20px padding= 124px*/
    .col2{width:175px}/* 175px + 20px = 195px*/
    .col3{width:166px}/* 166px + 20px = 186px*/

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    That was just showing you what the total width was going to be as the padding is added to the width of the cell but it looks like I can't add up as 94px + 20px is 114px not 124px


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
  •