Css – Custom header and footer in html page

cssfootergoogle-chromeheaderprinting

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?

Best Solution

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 !