FireFox and table border

Discussion in 'HTML' started by MG, Oct 7, 2006.

  1. MG

    MG Guest

    There is a table on this page:
    www.sallys.co.za/venue.htm

    In IE it displays the way I expect it to. However, in FF the table border
    becomes "detached" from the table. ie there is a large space between the
    table and its border.

    What causes this?

    How do I fix it?

    Thanks
    MG
     
    MG, Oct 7, 2006
    #1
    1. Advertisements

  2. MG

    Rick Brandt Guest

    MG wrote:
    > There is a table on this page:
    > www.sallys.co.za/venue.htm
    >
    > In IE it displays the way I expect it to. However, in FF the table
    > border becomes "detached" from the table. ie there is a large space
    > between the table and its border.
    >
    > What causes this?
    >
    > How do I fix it?
    >
    > Thanks
    > MG


    The 3 ems of padding you have set for the table class?
    table.Std {border:gray solid 2px; padding:3em;}
     
    Rick Brandt, Oct 7, 2006
    #2
    1. Advertisements

  3. MG wrote:
    > There is a table on this page:
    > www.sallys.co.za/venue.htm
    >
    > In IE it displays the way I expect it to. However, in FF the table border
    > becomes "detached" from the table. ie there is a large space between the
    > table and its border.
    >
    > What causes this?


    Not Firefox but IE, IE is improperly ignoring the padding that you put
    on the table as Rick pointed out.

    The table's padding should be added to the border-spacing for the
    exterior table cells in the table. IE is not playing by the rules here. See:

    http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing


    See for yourself, IE is not applying the 50px padding here:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>


    <title>Demo</title>

    <style type="text/css">
    TABLE { border: 1px solid #f00; padding: 50px; border-spacing 15px;
    background-color: #ff0;}
    TD { border: 5px solid #0f0; background-color: #0ff;}
    </style>

    </head>
    <body>

    <table>
    <tr><td>Alpha</td><td>Bravo</td><td>Charlie</td></tr>
    <tr><td>Alpha</td><td>Bravo</td><td>Charlie</td></tr>
    <tr><td>Alpha</td><td>Bravo</td><td>Charlie</td></tr>
    </table>

    </body>
    </html>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 7, 2006
    #3
  4. MG

    MG Guest

    >> There is a table on this page:
    >> www.sallys.co.za/venue.htm
    >>
    >> In IE it displays the way I expect it to. However, in FF the table
    >> border becomes "detached" from the table. ie there is a large space
    >> between the table and its border.
    >>
    >> What causes this?
    >>
    >> How do I fix it?
    >>
    >> Thanks
    >> MG

    >
    > The 3 ems of padding you have set for the table class?
    > table.Std {border:gray solid 2px; padding:3em;}



    Thanks Rick
    That was it.
    Now I just have to try and understand why it works differently in IE and FF.

    MG
     
    MG, Oct 7, 2006
    #4
    1. Advertisements

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad
    Replies:
    0
    Views:
    2,501
    tshad
    Jan 31, 2005
  2. Shailesh Humbad

    HTML and CSS Table Border Style Wizard

    Shailesh Humbad, May 11, 2004, in forum: HTML
    Replies:
    13
    Views:
    7,888
    Day Bird Loft
    May 18, 2004
  3. phl
    Replies:
    1
    Views:
    4,709
    Martin Jay
    Jun 8, 2006
  4. UJ
    Replies:
    8
    Views:
    63,635
  5. Coder
    Replies:
    1
    Views:
    919
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  6. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    border-color: #003366; border-width: 2px;

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Jul 17, 2006, in forum: HTML
    Replies:
    64
    Views:
    4,247
    Adrienne Boswell
    Jul 30, 2006
  7. Replies:
    3
    Views:
    1,125
    richard
    Sep 24, 2006
  8. Stan SR
    Replies:
    3
    Views:
    3,051
    Gregory
    Jan 30, 2007
Loading...