SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Location
    IA, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox 3.6 doesn't print collapsed borders on last page of multi-page table

    Is this a known issue? It seems like a pretty major problem, but I haven't come across any bug reports that cover it specifically. The bug only occurs if a table cell is split by a page break-- page breaks between rows don't cause it. Both table and cell borders are affected. The borders show up on all pages but the last, which shows the table content with no borders. The problem can easily be demonstrated by creating a simple html table, giving it some CSS borders, setting border-collapse: collapse, and filling one of the cells with enough text to ensure that a page break will occur within it. It occurs in both the print preview and the hardcopy. I've tested in FF 3.6.8 and in IE8 (both on Windows XP), and it only happens in FF. Does anyone know of a workaround that doesn't involve using border-spacing: 0 in place of border-collapse: collapse? (I'll use that solution if I have to, but it has some problems of its own).

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Location
    IA, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It appears I was mistaken about the scope of this problem. Further testing has shown that it only happens when a page break occurs in the very last row of cells in a table. Maybe that's why not many people have bothered to report it.

    The obvious solution, then, would be to add a row of empty cells after the last row, and in my testing, this actually does seem to work. The cells must have left and/or right borders set for some reason, but as long as their padding is set to zero they will be invisible.

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

    Yes I can see the bug in FF3.6 and it seems you can fix it by adding a background color to the last row rather than adding a redundant row.

    e.g.
    Code:
    @media print {
        tr:last-child{background:#fff}
    }
    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>
    table {
        border-collapse: collapse;
    }
    td {
        border:1px solid #000;
        width:300px
    }
    
    @media print {
        tr:last-child{background:#fff}
    }
    </style>
    </head>
    <body>
    <table>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </td>
        </tr>
    </table>
    </body>
    </html>
    Hope that's some use.

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Oh cool, that's good to know.

    Gosh, sounds suspiciously like the type of solution that would work for an IE bug :/

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Location
    IA, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! Your solution actually makes this problem pretty trivial.

    Quote Originally Posted by Stomme poes View Post
    Gosh, sounds suspiciously like the type of solution that would work for an IE bug :/
    I'm sure there are plenty of people who would disagree with me, but in my experience, FF and IE sort of reverse roles when it comes to printing, and IE gets to be the more competent browser for once.

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    This might be true, though my limited printing experience involves forms, where IE (all versions) screwed up the top border of fieldsets all the time, meaning I ended up removing them.

    Though Firefox's numerous bugs do not surprised me, especially the old ones because now they are so deeply buried in the trunk, nobody will ever fix them. The floating-printing problem was similar to a problem with fieldsets: instead of breaking a fieldset, firefox always made it start on a new page, wasting paper. I actually never managed to fix that one: they weren't floated.

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Location
    IA, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    The floating-printing problem was similar to a problem with fieldsets: instead of breaking a fieldset, firefox always made it start on a new page, wasting paper.
    That reminds me of another problem I've been having with FF: it apparently won't allow a pagebreak inside a div that has its overflow property set to hidden. Sheesh, for a browser that doesn't support "page-break-inside: avoid" (last I checked, anyway), it sure does offer a lot of ways to accomplish the same thing. (I believe "display: inline-block" also does it, though in that case it makes sense).


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
  •