Hi!
I've been working/experimenting with layers quite a lot in the past day or two. I'm thinking about creating two separately scrolling frame-style sections on a site, something I haven't tried before. So far it's looking pretty good in a variety of browsers, but I have turned my attention to printing.
Having set the content layer to scroll when needed (using overflow: auto), rather than having the whole body of the document scroll, when I came to print the page it was printed with only the first screen's worth of content and scroll bars. Since then, I've linked a second stylesheet setting the media to print, which sets the scrolling back to normal. The printout is now absolutely fine in IE, just going on to a second page as it should. Obviously that stylesheet won't work in NN4, but nor will the scrolling on the layers, so that's OK.
However, I still find that in NN6 and NN7, although there are now no scrollbars printed, it still only prints one page worth of content. I guessed that that might be just to do with the fact that it's a fixed layer... made a test file with one layer with lots of text and the following css, and got the same thing when printing in NN7. Don't know about NN6, but guess it'd be the same.
#testlayer
{
position:absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
Anyone got any ideas on how to avoid this problem? I did find this topic when searching before posting [http://forums.webdeveloper.com/showthread.php?threadid=8628&highlight=print+layer] but that did not even solve the printing of scrollbars. Other than this problem, I am very pleased with the layout I have got so far, and I would very much appreciate any thoughts anyone has about this! Thanks in advance,
ristuart
---Edit---
I found this article on ALA - <!-- m --><a class="postlink" href="http://www.alistapart.com/stories/goingtoprint/">http://www.alistapart.com/stories/goingtoprint/</a><!-- m --> - which discussed a Gecko bug which I thought might have been relevant. I tried adding float: none; to the css style I gave above, but it doesn't appear to have had any effect...
Could we see your full code by any chance? (it's difficult to know what you've done etc and how you've done it.)
I think you need the line
overflow:visible;
in your print code
thanks.Sorry, I meant to make it clearer that I had simply made a blank page and added one layer with those settings - but here is the full source of the test page (content snipped though).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#testlayer
{
position:absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
float: none;
}
-->
</style>
</head>
<body>
<div id="testlayer">
<p>Content test, content test, content test.
Fill this space with lots of content test.
*snip* Put enough to cover more than one
page worth of printing! *snip*
Content test, content test, content test.
Fill this space with lots of content test!</p>
</div>
</body>
</html>
That's all that's on my test page, other than a lot more content so that it should fill more than one printed sheet.
On the actual layout I was working on, when I say that I made a stylesheet for print media to avoid the printing of scrollbars, that stylesheet used overflow: visible; and like I said, the scroll bars are no longer printed but in NN6/7 there is still only one page worth of content printed. The rest is lost when printing.
I tried adding overflow: visible; to this test stylesheet as well, but it did not fix the problem.
Thanks for your time,
ristuartI haven't had time to check your page (rush job ends thurs) but try setting the height to something like 200px; or not specifying height at all.I tried not setting the height at all this morning before I came out, and as far as the print preview showed the same problem remained :/
ristuartIt seems like you need to use media-specific style sheets now.
<style type="text/css">
<!--
@media screen {
/*
INSERT STYLES TO FORMAT PAGE FOR DESKTOP COMPUTERS
EXAMPLE:
*/
#testlayer
{
position:absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
float: none;
}
}
@media print {
/* INSERT STYLES TO FORMAT PAGE FOR PRINT */
#testlayer {
position: absolute;
left: 0px;
top: 0px;
width: auto;
height: auto; /* NOTE: these are the default settings for the browser for width and height */
}
}
-->
</style>
I've been working/experimenting with layers quite a lot in the past day or two. I'm thinking about creating two separately scrolling frame-style sections on a site, something I haven't tried before. So far it's looking pretty good in a variety of browsers, but I have turned my attention to printing.
Having set the content layer to scroll when needed (using overflow: auto), rather than having the whole body of the document scroll, when I came to print the page it was printed with only the first screen's worth of content and scroll bars. Since then, I've linked a second stylesheet setting the media to print, which sets the scrolling back to normal. The printout is now absolutely fine in IE, just going on to a second page as it should. Obviously that stylesheet won't work in NN4, but nor will the scrolling on the layers, so that's OK.
However, I still find that in NN6 and NN7, although there are now no scrollbars printed, it still only prints one page worth of content. I guessed that that might be just to do with the fact that it's a fixed layer... made a test file with one layer with lots of text and the following css, and got the same thing when printing in NN7. Don't know about NN6, but guess it'd be the same.
#testlayer
{
position:absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
Anyone got any ideas on how to avoid this problem? I did find this topic when searching before posting [http://forums.webdeveloper.com/showthread.php?threadid=8628&highlight=print+layer] but that did not even solve the printing of scrollbars. Other than this problem, I am very pleased with the layout I have got so far, and I would very much appreciate any thoughts anyone has about this! Thanks in advance,
ristuart
---Edit---
I found this article on ALA - <!-- m --><a class="postlink" href="http://www.alistapart.com/stories/goingtoprint/">http://www.alistapart.com/stories/goingtoprint/</a><!-- m --> - which discussed a Gecko bug which I thought might have been relevant. I tried adding float: none; to the css style I gave above, but it doesn't appear to have had any effect...
Could we see your full code by any chance? (it's difficult to know what you've done etc and how you've done it.)I think you need the line
overflow:visible;
in your print code
thanks.Sorry, I meant to make it clearer that I had simply made a blank page and added one layer with those settings - but here is the full source of the test page (content snipped though).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#testlayer
{
position:absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
float: none;
}
-->
</style>
</head>
<body>
<div id="testlayer">
<p>Content test, content test, content test.
Fill this space with lots of content test.
*snip* Put enough to cover more than one
page worth of printing! *snip*
Content test, content test, content test.
Fill this space with lots of content test!</p>
</div>
</body>
</html>
That's all that's on my test page, other than a lot more content so that it should fill more than one printed sheet.
On the actual layout I was working on, when I say that I made a stylesheet for print media to avoid the printing of scrollbars, that stylesheet used overflow: visible; and like I said, the scroll bars are no longer printed but in NN6/7 there is still only one page worth of content printed. The rest is lost when printing.
I tried adding overflow: visible; to this test stylesheet as well, but it did not fix the problem.
Thanks for your time,
ristuartI haven't had time to check your page (rush job ends thurs) but try setting the height to something like 200px; or not specifying height at all.I tried not setting the height at all this morning before I came out, and as far as the print preview showed the same problem remained :/
ristuartIt seems like you need to use media-specific style sheets now.
<style type="text/css">
<!--
@media screen {
/*
INSERT STYLES TO FORMAT PAGE FOR DESKTOP COMPUTERS
EXAMPLE:
*/
#testlayer
{
position:absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
float: none;
}
}
@media print {
/* INSERT STYLES TO FORMAT PAGE FOR PRINT */
#testlayer {
position: absolute;
left: 0px;
top: 0px;
width: auto;
height: auto; /* NOTE: these are the default settings for the browser for width and height */
}
}
-->
</style>