I am trying to create a print stylesheet for a list of dealers so that we do not require a "Printable Version" button on the page, and I am running into some problems.
Most notable is the bug in Mozilla browsers that only prints one page of a multipage document. This bug is outlined on A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/goingtoprint">http://www.alistapart.com/articles/goingtoprint</a><!-- m -->), where you'll also find a workaround listed. But it isn't working for me...
When printing the above-referenced page, the bug fix works (which is to add "float: none" to the stylesheet, applying it to the container that spans multiple pages). But when I print my page containing the same bug-fix, I get behavior similar to what you'd expect if I never applied the fix at all!
Here is the css for the print stylesheet:
<style type="text/css" media="print">
body {
background: white;
width: 100%
}
div#screen_header {
display: none
}
div#screen_leftbar {
display: none
}
div#screen_body {
display:none
}
div#print_header {
position: absolute;
top: 0.0in;
left: 0.0in;
z-index: 0;
width: 6.0in
}
div#print_body {
position: absolute;
top: 0.35in;
left: 0.0in;
z-index: 1;
width: 6.0in;
float: none !important
}
</style>
I am kinda new to a lot of CSS features... Maybe I am just forgetting something. I don't know.
Thanks in advance!
Most notable is the bug in Mozilla browsers that only prints one page of a multipage document. This bug is outlined on A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/goingtoprint">http://www.alistapart.com/articles/goingtoprint</a><!-- m -->), where you'll also find a workaround listed. But it isn't working for me...
When printing the above-referenced page, the bug fix works (which is to add "float: none" to the stylesheet, applying it to the container that spans multiple pages). But when I print my page containing the same bug-fix, I get behavior similar to what you'd expect if I never applied the fix at all!
Here is the css for the print stylesheet:
<style type="text/css" media="print">
body {
background: white;
width: 100%
}
div#screen_header {
display: none
}
div#screen_leftbar {
display: none
}
div#screen_body {
display:none
}
div#print_header {
position: absolute;
top: 0.0in;
left: 0.0in;
z-index: 0;
width: 6.0in
}
div#print_body {
position: absolute;
top: 0.35in;
left: 0.0in;
z-index: 1;
width: 6.0in;
float: none !important
}
</style>
I am kinda new to a lot of CSS features... Maybe I am just forgetting something. I don't know.
Thanks in advance!