Custom header and footer in html page

Question

I want to put header and footer in every page at print mode. I've done many research about that.

I've find two solution. But they aren't cross-browser ( I want it to work in IE, Firefox and Chrome)

The first solution : I am setting margins on the top and bottom to my content table. Then i write header and footer to this spaces with fixed position. It is working perfect in Firefox. But in IE and Chrome It doesnt set margins. Also in Chrome it doesnt write header and footer to every page.

Here is my code:

pagination.php

<!DOCTYPE HTL> 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex">
    <meta http-equiv="cache-control" content="no-cache">    
    <title>Brove.NET ISO Yazılımı</title>
    <link rel="stylesheet" type="text/css" href="css/pagination.css" />
</head>

<body>
    <table class="header" cellpadding="0" cellspacing="0">
      <tr>
        <td>header
        </td>
      </tr>
    </table>

    <table class="content" cellpadding="0" cellspacing="0">
      <tr>
        <td valign="top">
       content
        </td>
      </tr>
    </table>

    <table class="footer" cellpadding="0" cellspacing="0">
      <tr>
        <td>footer
        </td>
      </tr>
    </table>

</body>
</html>

pagination.css

@media screen{
    .header{
        width:768px;
        height:100px;
        border:2px solid #000;
    }

    .content{
        width:768px;
        margin-top:10px;
        margin-bottom:10px;
        height:1000px;
    }

    .footer{
        width:768px;
        height:100px;
        border:2px solid #000;
    }
}

@media print {    
    .header{
        position:fixed;
        top:0;
        left:0;
        width:768px;
        height:100px;
        border:2px solid #000;
    }

    .content{
        width:768px;
        margin-top:120px;
        margin-bottom:120px;
        height:1000px;
    }

    .footer{
        position:fixed;
        left:0;
        bottom:0;
        width:768px;
        height:100px;
        border:2px solid #000;
    }

    @page{
        margin-bottom:150px;
    }
}

And this is the second solution :

In this solution im using table-header-group and table-footer-group attributes. It works Firefox and IE. But Chrome doesnt understand again. It doesnt repeat header and footer in every page on print mode.

Here is another code : Is there a way to get a web page header/footer printed on every page?

<style type="text/css">
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
</style>

<body>
<table>
   <thead><tr><td>Your header goes here</td></tr></thead>
   <tfoot><tr><td>Your footer goes here</td></tr></tfoot>
   <tbody>
     <tr><td>
     Page body in here -- as long as it needs to be
     </td></tr>
   </tbody>
</table>
</body>

Is there any hack to solve this browser problems or do you have any suggestion to me?

No. You either compile a PDF and pass that to the print manager, or you live with the default behavior. — MetalFrog
I am creating pdf also but it is very slow. So i want to do this with html — FURKAN ILGIN
@FURKANILGIN Hi FURKAN ILGIN, did you find any solution to this problem? I have been looking for this solution for three days.. but still no luck. Would you mind if I ask you to share your solution if you found any? Thanks — black_belt

Chintan Chintan · Accepted Answer · 2012-01-21T17:09:24

Try to create your page in div tag rather than any table tag ! div is more light weight than table

<div id='header' style='height:230px'>
</div>

<div id='body'></div>

<div id='footer' style='height:230px'>
</div>

Thank You !

Custom header and footer in html page

2 Answers