SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Printing, custom footer on every page

    Hi,
    We have a Windows desktop application, where we use HTML for printing reports, using whichever IE is installed on the client machine. Currently, it's IE6, IE7 and IE8. Changing to another browser is unfortunatly not an option.

    There is often a request from our clients to have a custom footer on every printed page with their company information, and a small logo. The way we solve it right now is quite an ugly hack, something like this:

    HTML Code:
    <table>
    	<thead>
    		<tr>
    			<td>Header</td>
    		</tr>
    	</thead>
    	<tfoot>
    		<tr>
    			<td>Footer</td>
    		</tr>
    	</tfoot>
    	<tbody>
    		<tr>
    			<td>Body</td>
    		</tr>
    		<tr>
    			<td style="height:1500px;">&nbsp;</td>
    		</tr>
    	</tbody>
    </table>
    That is, wrap all content in the report in a table with a tfoot, and have a very tall <td> in the bottom of <tbody> to push down <tfoot> to the bottom of the page. It's a hack, and it only works in quirks mode in IE, but at least it works.

    The problem is when that wrapping table needs tables inside it, with their own <thead> and <tfoot>, that needs to be repeated if the table laps over multiple pages. It simply doesn't work. What I've done in these situations is to tell the client that for a report that needs multiple tables, a footer on the bottom of every page isn't possible. And then removed the wrapping table, forced IE out of quirks mode, and everything works quite nicely.

    But is there any way to get a custom footer at the bottom of every printed page? Every alternative is interesting to me, even if it involves changing registry keys, etc. The dream is to make it work for IE6 as well, but I realize that the odds for that are pretty slim.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First time I listen that why we use tfoot, tbody and thead but one thing I want to know that after using these tags there is no need to add width, height in table/td/tr , it will auto adjust the space or width. Can describe that or any help full link can you provide it.

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a pretty good solution while digging through older threads here:
    http://www.sitepoint.com/forums/show...ighlight=print

    It uses position:fixed, so it doesn't work in IE6, but it's a step in the right direction at least. If anyone has any other suggestions, they're more than welcome.

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The position:fixed works quite well, except that content is sometimes placed under the footer, and I can't seem to work around that. I've tried setting @page {margin-bottom:50px;}, and #footer {bottom: -50px;}, but that cuts off the footer, and padding in @page doesn't seem to work. Any ideas?

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an ugly hack that works, at least right now; wrap all content inside a table, and place a tfoot in that table with a td with the same height as the footer. That tfoot td will act as a spacer, preventing the content to be placed under the footer.

    Earlier I wrote that I couldn't use a wrapping table when not in quirks mode, but the issue with that was that the tfoot was placed directly below tbody, when I wanted it at the bottom of the page. But since the tfoot I use now is empty, it doesn't matter where it's placed.

    One problem with this though, is that if the content is exactly two pages, the tfoot will be pushed to a third page, which will be empty (except for the real footer) since the tfoot is nothing but a spacer.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by wysiwyg View Post
    There is often a request from our clients to have a custom footer on every printed page with their company information, and a small logo.
    Sorry, this is not a very helpful reply, but why not suggest they use letterhead! (That is, print the html onto pages with the footer pre-printed on them.)

    The position:fixed works quite well, except that content is sometimes placed under the footer... Any ideas?
    Perhaps you could force a page break on certain elements, like so:

    Code:
    .some-element     { page-break-after:always; }
    Maybe worth a try.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Don't create the spacer with a new td but create it with padding bottom on the cell that holds the content. In that way they will always stay together.

    This works in IE7 (and IE8 gets a normal table footer which it automatically places on each page anyway (except the last)).

    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 type="text/css">
    html, body {
        height:100&#37;;
        margin:0;
        padding:0;
    }
    table {
        height:100%;
        width:100%;
        border-collapse:collapse
    }
    table td {
        vertical-align:top
    }
    .footer {
        position:fixed;
        height:100px;
        background:red;
        bottom:0;
        width:100%;
    }
    tbody td {
        padding-bottom:100px
    }
    </style>
    <!--[if gte IE 8]>
    <style type="text/css">
    .footer{position:static}
    </style>
    <![endif]-->
    </head>
    <body>
    </body>
    <table cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <td>Header</td>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td><div class="footer">Footer</div></td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td><p>content 1</p>
                    <p>content 2</p>
                    <p>content 3</p>
                    <p>content 4</p>
                    <p>content 5</p>
                    <p>content 6</p>
                    <p>content 7</p>
                    <p>content 8</p>
                    <p>content 9</p>
                    <p>content 10</p>
                    <p>content 1</p>
                    <p>content 2</p>
                    <p>content 3</p>
                    <p>content 4</p>
                    <p>content 5</p>
                    <p>content 6</p>
                    <p>content 7</p>
                    <p>content 8</p>
                    <p>content 9</p>
                    <p>content 10</p>
                    <p>content 1</p>
                    <p>content 2</p>
                    <p>content 3</p>
                    <p>content 4</p>
                    <p>content 5</p>
                    <p>content 6</p>
                    <p>content 7</p>
                    <p>content 8</p>
                    <p>content 9</p>
                    <p>content 10</p>
                    <p>content 1</p>
                    <p>content 2</p>
                    <p>content 3</p>
                    <p>content 4</p>
                    <p>content 5</p>
                    <p>content 6</p>
                    <p>content 7</p>
                    <p>content 8</p>
                    <p>content 9</p>
                    <p>content 10</p>
                    <p>content 1</p>
                    <p>content 2</p>
                    <p>content 3</p>
                    <p>content 4</p>
                    <p>content 5</p>
                    <p>content 6</p>
                    <p>content 7</p>
                    <p>content 8</p>
                    <p>content 9</p>
                    <p>content 10</p>
                    <p>content - last</p></td>
            </tr>
        </tbody>
    </table>
    <body>
    </body>
    </html>

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    @Ralph, not to discourage your comment but the page-break family of properties only work in Opera (perhaps the newest FF if your lucky. I haven't seen what FF3.6 is capable of though )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul: Having the footer in the middle instead of at the bottom on the last page in IE8 is going to give me more complaints from the customers than a blank page at the end, so I'll have to go with that, at least for now.

    @Ryan: The page-break properties work in IE as well, even IE6.


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
  •