I want to set margin-top and bottom to my print page for writing header and footer.
I did it in Firefox. But it doesn't work in chrome and internet explorer.
When I used @page code it works in chrome. But I cant write header on the top and footer on the bottom. How can I solve this problem?
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;
}
}
IE screenshot:
Firefox screenshot:
Chrome screenshot:
