I want to display page numbers only on print page. I have written css counters to do this job but this only works on Firefox but not in Chrome and IE.
<!DOCTYPE html>
<html>
<head>
<style>
.footer{
display:none;
}
body{
counter-reset:page;
}
@media print{
div.footer{
display:table-footer-group;
position:fixed;
bottom:0pt;
right:0pt;
}
div.footer:after{
counter-increment:page;
content:counter(page);
}
}
</style>
</head>
<body>
<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>
<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>
<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>
<div class="footer">Page </div>
</body>
</html>
What are the other options to make it display in Chrome and IE browsers?
