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. Advertising

  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. Advertising

  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. Advertising

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,281
    tshad
    Jan 31, 2005
  2. phl
    Replies:
    1
    Views:
    4,381
    Martin Jay
    Jun 8, 2006
  3. UJ
    Replies:
    8
    Views:
    61,592
  4. Coder
    Replies:
    1
    Views:
    713
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  5. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

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

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Jul 17, 2006, in forum: HTML
    Replies:
    64
    Views:
    3,569
    Adrienne Boswell
    Jul 30, 2006
Loading...

Share This Page