SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question firefox border-collapse problem

    I'm trying to figure out how to fix this in firefox.
    I've got these nested tables [see example]. In firefox the inner table [red] 's left and top border collapse with the border of it's surrounding td.
    Does anyone know how to fix this while keeping the doctype?

    example page
    -------------
    <!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">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .table1, .table2 { border-collapse:collapse; }
    .table1 td { border:1px solid #4b4b4b; width:30px; }
    .table2 td { border:1px solid #ff0000; }
    -->
    </style>
    </head>

    <body>
    <table border="0" cellspacing="0" cellpadding="0" class="table1">
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><table border="0" cellspacing="0" cellpadding="0" class="table2">
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>

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

    Tables aren't my thing so excuse the hack but this will make it look the same in firefox.
    Code:
    .table2 {margin:1px 0 0 1px;}
    * html .table2 {margin:0;}
    
    However it breaks opera

    There's probably a better way than this

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    maybe this works for you

    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">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .table1,.table2{border-collapse:collapse; }
    .table1 .x td {border:1px solid #4b4b4b; width:30px; }
    .table1 .y td {border:none;}
    #table2{background:#ff0000;}
    #table2 .y td{background:#ffffff;}
    </style>
    </head>
    
    <body>
    <table border="0" cellspacing="0" cellpadding="0" class="table1">
    <tr class="x">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
    
    <table border="0" cellspacing="1" cellpadding="0" id="table2">
    <tr class="y">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr class="y">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr class="y">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    
    </td>
    </tr>
    <tr class="x">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr class="x">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>
    colspan rowspan demo

    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=iso-8859-1" />
    <title>12345 12345 12345 12345 12345</title>
    <style type="text/css">
    .table1{border-collapse:collapse;}
    .table1 td{border:1px solid #0000ff;width:30px;}
    .table1 .x .y{border:1px solid #0000ff;}
    .table1 .x td{border:1px solid #ff0000; }
    .table1 .xx td{border:1px solid #ff0000;border-bottom:1px solid #0000ff;}
    </style>
    </head>
    
    <body>
    <table border="0" cellspacing="0" cellpadding="0" class="table1">
    <tr class="x">
    <td rowspan="3" class="y">1</td>
    <td rowspan="3" class="y">2</td>
    
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    
    <tr class="x">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    
    <tr class="xx">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    
    <tr>
    <td>1</td>
    <td>2</td>
    <td colspan="3">3</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    <td colspan="3">3</td>
    </tr>
    </table>
    </body>
    </html>

  4. #4
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nice workaround all4nerds, but i need the freedom to change the bordercolor of the red table (so the outer border of the red table).

    btw . Is this firefox behaviour (the collapsing border in my original posting) a bug or a w3c guideline???

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It seems only firefox is doing this as opera8 is like IE but i would hazard a guess that firefox is probably correct .

    I've been reading the specs on border-collapse but it seems to get quite complicated in that the table border collapses onto the td border as they occupy the same space and therefore the td border then collapses with the parent tables td border.

    There seems to be no mention of nested tables although I assume that if the nested table is also border-colllapse then its borders should also collapse following the original rules.

    http://www.w3.org/TR/CSS21/tables.html#borders

    If you set the inner table to border-collapse:separate the the nested tables border works fine but of course the td's inside have spacing etc.

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    I donít know if this is expected behaviour, border-collapse:collapse; is per single table not for nested tables ?
    An other problem with nested tables and Tag CSS is that the CSS is not separating / targeting any more
    table1 td {/* css */} is also bleeding in the nested tables , this can become pretty complicated

    Since we donít know what you are trying to achieve, maybe a link to your Page helps


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
  •