By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,057 Members | 1,407 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,057 IT Pros & Developers. It's quick & easy.

CSS and Print

P: n/a
I have a weird behavior occuring in IE 6.0. I am trying to use HTML
to display documents to a user, but then also have it sent directly to
the printer and have it look similiar (I know probably not the best
way to do it). If I have multiple pages, everything works just fine.
For some reason that I can't figure out, when I only have a single
page, IE when it goes to print (print preview included), will add a
second blank page, regardless of what I do. Below is a sample of what
I'm trying to accomplish...any help or pointers would greatly be
appreciated.

Thanks,
Benjamin

<html>
<head>
<script language="JavaScript">
<!--
function adjustPrint(){
var pgs = document.all.stuff;
for (i=0;i<pgs.length;i++) {
pgs[i].style.height = "9.5in";
pgs[i].style.top = (pgs[i].number-1)*9.5 + 'in';
}
}
function adjustPrintBack(){
var pgs = document.all.stuff;
for (i=0;i<pgs.length;i++) {
pgs[i].style.height = "11in";
pgs[i].style.top = (pgs[i].number-1)*11 + 'in';
}
}
window.onbeforeprint=adjustPrint;
window.onafterprint=adjustPrintBack;
-->
</script>
<style type="text/css">
div.page {
position: absolute;
font-family: times;
font-size: 12pt;
margin: 0in;
border: dashed blue 0.5pt;
clip: rect(0,8.5in,11in,0);
}
div.CA {
position: absolute;
border: dashed black 0.5pt;
background-color: white;
}
@media print {
div.page {
margin: -0.75in;
page-break-after: always;
border: none;
}
div.CA {
border: none;
}
}
</style>
<title>Page Test</title>
</head>
<body>
<div id="stuff" class="page" number="1"
style="top:0in;left:0in;width:8.5in;height:11in;">
<div class="CA"
style="top:4.729in;left:.76in;width:6.948in;height :.563in;overflow:hidden;">Some
Text at a specified location.</div>
</div>
<!-- add this page div back in to see that only two pages are
printed -->
<!--
<div id="stuff" class="page" number="2"
style="top:11in;left:0in;width:8.5in;height:11in;" >
<div class="CA"
style="top:4.729in;left:.76in;width:6.948in;height :.563in;overflow:hidden;">Some
Text at a specified location.</div>
</div>
-->
</body>
</html>
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
*Benjamin* <be**********@hotmail.com>:

I am trying to use HTML to display documents to a user,
Hey, I believe you're the first one ever to try this.
but then also have it sent directly to the printer
Isn't that nice, just click the little Printer-Icon in your Browser and it
prints.
and have it look similiar
The Printout to what?
For some reason that I can't figure out, when I only have a single
page, IE when it goes to print (print preview included), will add a
second blank page, regardless of what I do.
Select to print only the first Page then; at least the second one is not
wasted with some useless Text.
<script language="JavaScript">
Javascript is off topic here and you've left out the type-Attribute.
var pgs = document.all.stuff;
That's IE-specific. Well, some Browsers try to imitate IE's proprietary DOM.
However, you're lying in the language-Attribute above, it's not JavaScript,
but JScript.

function getElementsByClassName(className) {
var allObj, retObj = new Array(), j=0;
allObj = document.getElementsByTagName ? document.getElementsByTagName("*")
: document.all ? document.all : 0;
if(allObj!=0)
for(i=0; i<allObj.length; i++)
if(allObj[i].className==className)
retObj[j++]=allObj[i];
return retObj;
}
function adjustPrint(size, unit) {
var pgs = getElementsByClassName("page");
if (pgs!=0)
for (i=0; i<pgs.length; i++) {
pgs[i].style.height = size + unit;
pgs[i].style.top = i*size + unit;
}
}
function adjustPrintBefore() {adjustPrint(9.5, "in")}
function adjustPrintAfter() {adjustPrint(11, "in")}
window.onbeforeprint=adjustPrintBefore;
window.onafterprint=adjustPrintAfter;
pgs[i].style.height = "9.5in";
Wait a Moment ... that's 241.3 mm, should fit on an A4-Page with 297 mm - 2
20 mm Margin.
pgs[i].style.top = (pgs[i].number-1)*9.5 + 'in';
Why not "i*9.5"?
pgs[i].style.height = "11in";
That's 279.4 mm and fits only with highly reduced Margins on a Sheet sized
A4.
window.onbeforeprint=adjustPrint;
window.onafterprint=adjustPrintBack;
I don't fully get what this whole JS-Stuff shall be for, plus only IE
understands both these Events.
div.page {
position: absolute;
clip: rect(0,8.5in,11in,0);
8.5 inch (215.9 mm) is broader than A4's 210 mm.
margin: -0.75in;
page-break-after: always;
}
div.CA {
position: absolute;
border: none;
} <div id="stuff" class="page" number="1"
There's no Attribute 'number' in HTML.
style="top:0in;left:0in;width:8.5in;height:11in;">

Inline Styles are bad and make Code unreadable.
<div class="CA"
style="top:4.729in;left:.76in;width:6.948in;height :.563in;overflow:hidden;">
Some Text at a specified location.</div></div> <div id="stuff2" class="page" number="2">


You use the same ID a second Time, which is not allowed and against the
Intention behind ID.

So why do you try to rebuild something with JScript and CSS, that your
Browser already can do? That Approach can only add new Problems, like with
I18N or Browser-Independency. If that Code shall only work on your Computer
or Computers controlled by you, you should have said so, because this is
comp.infosystems._*www*_.authoring.stylesheets.

Yes, I know that I didn't answer your question.

--
A magician pulls rabbits out of hats.
An experimental psychologist pulls habits out of rats.
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.