printable html page with header footer table header

See more:

CSS

HTML

IE8

dear all
now i am making a runtime html MySQL report generator opened using .Net web browser comportment on pcs using IE8 and i faced a huge amount of problems some i succeed to solve it and others are still so please help me and i googled alot alot alot

i have report with a page header & footer (printable repeatable on each page)
PLUS a very long table will be printed over many pages and so its header should also be repeated

repeating the table header was done using

 <meta http-equiv="X-UA-Compatible" content="IE=8" />
thead { display: table-header-group;   
@media print { table.tr { page-break-inside: avoid; } }       AT CSS style part
and using <thead> <tbody></tbody></thead>

but the big problem now is to have report with a page header & footer (printable repeatable on each page)

i tried the following and it worked but it overlapped with the table headers in every pages and with the last row in the table in some pages depends on data viewed

#printableHeader {display: block; position: fixed; top: 0px;} 
#printableFooter {display: block; position: fixed; bottom: 0px;}
 


 <div id="printableHeader">
           header data .........
  </div>

<div id="printableFooter">
           header data .........
  </div>

also i want to write in the footer page no. / pages no.

i tried

@page { @bottom { content: "Page " counter(page) " of " counter(pages) } }

but nothing happened

so please help with some well tested tips in IE8

thank alot
bye