Really stuck on this one.
I am creating a shipping doc for our warehouse and want to set the margins of pages using page names.
After reading the W3C specs and some other bits (though finding stuff for advanced print CSS is hard), I came up with the following test page to check the theory.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Untitled Document</title>
<style type="text/css">
body{margin:0;padding:0;}
div.invoice {page:invoice;}
div.labels {page:labels;}
div.last {page:last;}
@page invoice {margin:100mm 100mm 10mm 10mm;}
@page labels {margin:10mm 10mm 10mm 100mm;}
@page last {margin:100mm 100mm 100mm 100mm;}
div {page-break-after:always;page-break-inside:avoid;}
</style>
</head>
<body>
<div class="invoice">
<p>Invoice magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
</p>
</div>
<div class="labels">
<p>Labels magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
</p>
</div>
<div class="last">
<p>Last magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
</p>
</div>
</body>
</html>
No luck getting this to work in any browser though @page:left and @page:right work perfectly.
I have tried with and without the IE8 compatibility meta tag.
I can’t go through a create PDF step to fix as these documents can be anything from a few pages to over a hundred.
It needs to work in IE8 (suposedly @page names work in IE8)
Am I missing something or doing something wrong?
First, I would put your CSS in an external sheet so you can edit it in one place. In your HTML file:
<link rel=“stylesheet”
type=“text/css”
media=“print” href=“print.css” />
On the “media” attribute this is usually “screen” for a computer monitor and “print” is for print. I also don’t know anybody that uses mm for the margins. All in all, W3C can be hard to follow and the way they explain things is not always practical. Try this article instead and see if maybe it helps. http://www.alistapart.com/articles/goingtoprint/
Sorry to be rude bohnstudios I know you are trying to help but you’re teaching your grandma how to suck eggs.
The location of the CSS and media type are irrelevant as the CSS is purely for printing invoices in a warehouse, and this is only a test file built to test if the concept works so I don’t really want 100mm margins, it just makes it very very clear at a glance if it is working or not.
The margins are in mm because the paper to be printed on is A4, 210 X 297mm and all the pre-cut labels to be fitted inside are measured in mm. There is no benefit to converting into inches or any other unit as this would lead to wasted time and inaccuracy.
Thanks for the link but it isn’t relevant to my question. It is about optimising continuous media websites for paged media output.
My issue is about a specific paged media feature specced here http://www.w3.org/TR/css-print/ and claimed to be supported by Microsoft in IE8 and above here http://msdn.microsoft.com/en-us/library/dd433064(v=vs.85).aspx whereby you can apparently use an element on a page to set the name of the printed page you are currently on. I must admit myself that after 10 years of building websites with CSS it is the first time I had come across this feature, though I have never had to precisely build a document in CSS and HTML for print.
And before anyone says it, as I would probably say the same thing myself. yes I really am stuck with IE8 
as the printing is mission critical and on a Windows XP machine and apparently IE is actually the best browser when it comes to reliable precision printing of HTML pages. Also my CTO has final say on any such changes and is not likely to budge on this issue as it would be a difficult move to make.
What EXACTLY is not working anyways? You never said that.
Maybe you should just not use CSS for this task and just use a table with image spacers…this is the old-school way to do it (not that it matters that much, but I’ve building websites for 14 years, grammy : ). It should display perfectly in IE8 but also all the way back to IE5 and beyond (I know you that you just need IE8, I’m just saying that it will). Then, there is the variable of your printer(s) which is just as big of an issue, if not a bigger variable, at least when I’ve done this sort of thing.
If I understand what you are trying to do (print an HTML page with consistent display on actual paper?), then I personally think you are trying to do things the hard way when its probably not necessary for what you are needing to accomplish.
You sound frustrated, and yes, I am trying to help you. You should just use a table because you don’t have to mess with all that “hard” stuff as you put it. I’ve done what you are trying to do before (I also do print design btw) and I can tell you that the biggest variable that you need to work around is your printer. I don’t understand why you wouldn’t be able to go about this a much more simple way and get it up and running with after couple “test prints” and adjusting accordingly. Other than than you could supply more information about exactly what you are trying to do. Your code is a mess and you’re trying to use code that is too “out there” for IE8…this is my opinion. Once again, I strongly suggest not using mm because that is not a standard unit of measurement in the country that IE was built in. This should be a 30 minute job if you just use tables, pixels (or em), and you should be up and running in 30 minutes. There is no reason to use div’s based on what you explained this is being used for.
You could also just use blinksale if you don’t get whatever it is you are trying to do to work. I don’t know for sure because you seem to be caught up in obscure/not-so-common CSS code when there could be a much easier way to achieve what you are trying to do. Just saying. Nobody else has replied to your post so it “could” be safe to assume that there is something fundamentally wrong with your approach and/or the information you have provided in order for people to help you. don’t over-think it.