Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Firefox Table TD ignores padding-bottom:0;

    Hello,

    I have a table as follows:

    <table>
    <tr>
    <td>
    *PROBLEMATIC CELL*
    </td>
    <td rowspan="2">
    </td>
    <td rowspan="3">
    </td>
    </tr>

    <tr>
    <td>
    </td>
    </tr>

    <tr>
    <td colspan="2">
    </td>
    </tr>
    </table>

    The first cell of the first row, has a padding at the bottom. Well it's not really padding but it looks like padding and using firebug I can not find what the space there actually is.

    I think what is happening is that, firefox automatically adjusts the bottom padding of the first td in the first tr with the padding top of the first and only td of the second tr.

    p.s. works perfectly fine in Chrome.

    please help me

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Try td {vertical-align: top;}. This is sometimes the cause for confusion.

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Try td {vertical-align: top;}. This is sometimes the cause for confusion.
    I have the vertical align set to top on the first td of first tr.

    On the first td of the second tr the vertical align is set to bottom.

    But things still don't work

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by wormy123 View Post
    I think what is happening is that, firefox automatically adjusts the bottom padding of the first td in the first tr with the padding top of the first and only td of the second tr.
    Well, no, FF does not do that, but I don't see the problem anyway.

  • #5
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by wormy123 View Post
    I have the vertical align set to top on the first td of first tr.

    On the first td of the second tr the vertical align is set to bottom.

    But things still don't work
    Now I'm confused.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    p.s. works perfectly fine in Chrome.

    please help me
    Please post your complete code including DOCTYPE.
    If you are using tables for making your layout, read http://www.hotdesign.com/seybold/ first.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Please post your complete code including DOCTYPE.
    If you are using tables for making your layout, read http://www.hotdesign.com/seybold/ first.
    Here is the website:

    http://mmamail.com/index.php

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try adding
    Code:
    *{margin:0;padding:0;}
    into your CSS, to reset all browser specific default values of margins and paddings from all elements. If that doesn't solve, please provide the location where the issue resides.
    Last edited by abduraooft; 12-28-2009 at 11:19 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have the following in my CSS:

    table, tbody, thead, tfoot, tr, th, td {
    border:0;
    margin:0;
    padding:0;
    }

    If you try using firebug to see what that space actually is you will see that it is not any padding or margin of any sort.

    however I tried the suggested solution but it still didn't work.

    The problem is that this is not actually a padding problem, it's the way Firefox tries to fight two conflicting paddings to achieve the best results. Unfortunately it decides to respect the 20px top padding of the TD underneath it more than the padding-bottom of the first TD.

    Can this be resolved anyhow using the !important property?
    Last edited by wormy123; 12-28-2009 at 11:24 AM.

  • #10
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Please post your complete code including DOCTYPE.
    If you are using tables for making your layout, read http://www.hotdesign.com/seybold/ first.

    Unfortunately I am using tables for my layouts. The problem I encounter when not using tables is that browsers(IE) don't support stuff like display:table-cell properly so I am left with two options

    1. use tables and fix webpages quickly and easily with less code
    2. use divs and css an put in a hundred different hacks for every browser, specify div widths, float everything and really bloat up my css.

    For now I will continue to use tables until browsers such as IE start supporting more CSS properties.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by wormy123 View Post
    Unfortunately I am using tables for my layouts. The problem I encounter when not using tables is that browsers(IE) don't support stuff like display:table-cell properly so I am left with two options

    1. use tables and fix webpages quickly and easily with less code
    2. use divs and css an put in a hundred different hacks for every browser, specify div widths, float everything and really bloat up my css.

    For now I will continue to use tables until browsers such as IE start supporting more CSS properties.
    That is not a valid argument for using tables. Your using CSS3 stuff for your rounded corners in spite of the fact that it is not supported by IE and adds bloat to your CSS.
    In fact, nothing on your page would require any sort of hack at all... maybe something for IE to get your min-width settings right.


    p.s. There is a link in my signature line about tables that I like better than the one it was originally suggested you look at.

    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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