I have a web database app that runs in IE7+ (customer requirement) It is a shop control system that needs to send forms to the printer.
I've got #media print css set up to format the form properly when going from screen to printer. Mostly everything has been working fine.
I've recently added some jquery code to handle placing a footer at the bottom of the page with a variable size table above it. That works as expected except occasionally the footer is thrown to a second page on the printer even though it displays in the proper place on the screen.
So, my question is how can I get print preview to allow me to inspect the document elements so I can figure out what's throwing things off? I've got the IE Developer Toolbar, but it doesn't seem to give access to the print preview.
Thanks for any help.
I would suggest throwing different colored borders on your elements in your #media print css file. This is always useful in debugging layout issues and should show up in the print preview.
Related
I'm working on printing product web page. Employ #media print {...} to customize components for proper appearance on print canvas. But one issue I even can't understand how to drill to the root of the problem. The issue is that 3 out of 5 total pages are blank. First two pages rendered with content and then three blank pages. Chrome print preview popup window just give result and I have no clue what component(s) responsible for "printing" blank pages.
I find how to use chrome devtool to emulate print canvas and drill down to trouble maker
I'm working on a webpage that has a different "print to PDF" result (after Ctrl+P -> Save to PDF in Chrome) than the original web display by using #media print in the CSS code.
I'm using a variable font with the parameter font-variation-settings:"wght", but the generated PDF seems to ignore this parameter when used in #media print.
Yet, when using the Chrome tool "Inspector>Rendering>Print emulate CSS media type", changes of this parameter are taken into account in the displayed web page!
Looks like the problem comes from the Ctrl+P interface, any ideas on how to handle this?
Thank you in advance.
Please see https://bugs.chromium.org/p/chromium/issues/detail?id=1070089 - this should be fixed now, you may want to retest with a recent Chrome Canary build and see if the issue is indeed gone.
I'm attempting to perform some styling to handle page breaks when printing, to ensure my content does not get cut in half.
I know the styles requried to perform this (page-break-inside etc) but attempting to verify they work is a rather laborious task, especially when i can't query the DOM whilst its showing me the preview.
In Chrome (or any other browser for that matter) is it possible to put the page into print mode and have it render where the page breaks will be placed?
Currently i can use Dev tools to enable the print media queries, but the only way to see where the page breaks will take place is to actually bring up the print preview. However when thats up i can't interact with the DOM to see why elements do or don't get cut in half by the break.
When it all works this isn't really an issue but as we all know things tend to behave oddly more often than not!
Thanks
I have a report page that when you view the page there is a minimal gap between the charts and the headers:
But if the user prints or print previews the page there is a HUGE gap between the some (but not all) of the elements:
I've tried setting Chrome up to use the print media type in the Developer Tools which applies the correct styles but doesn't result in that gap. Can anyone suggest a way to troubleshoot this?
This may sound like a SuperUser issue, but I wrote the page in question and I'm wondering if there is something I can do to fix the problem....
I have a page in production that simlply displays data in a bunch of tables. Our employees basically go to this page to print a form with our clients information filled in for them. Today for a specific client the page is not printing. I've tried printing using IE 7 and 8 as well as Chrome on Windows XP and Windows 7. This client's data is by no means make the page longer or contain more data that others clients.
Symptoms:
Does NOT print using IE8 or IE7 on WinXP and Windows 7.
DOES print with Chrome.
The page to print is displayed fine as a far as the actual web page goes... it scrolls, there are no errors and and nothing seems to be wrong with the page.
When using IE to print, the document just spools with out actually printing out...I end up canceling the document from the printers window.
When viewing print preview the first page is displayed, but when we try to go to the second page in the print preview IE locks up.
This does not happen for every client, but when it does happen it can be reproduced.
The page is pretty long and has client info that is keeping me from just copy and pasting the markup for you guys. I am hopeing that some one else has experienced a similiar issue in IE and has some advice.
NOTE: The users are not allowed to use other browsers, so save the IE flamming please.
Hmmm, very hard to tell without markup.
Just to throw some ideas:
Are you using anything difficult on the pages, like Flash or Java?
Custom fonts / cufon?
Huge downscaled images?
opacity or IE specific crazy filter CSS rules?
A huge structure that IE doesn't manage to break up into pages, e.g. a giant table with position: absolute ?
If you use images, try turning off the images. Try turning off CSS.
A few things to try when debugging:
Switch everything over to a standard font and font size (e.g. Arial 12px).
Eliminate all CSS and JavaScript, and if that fixes it then you can narrow down from there by taking out chunk by chunk until it starts working.
If that doesn't work, try cutting down the content significantly to see if it will show up.