How to detect what cause empty/blank pages printed from web page - css

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

Related

IFrame content is showing as blank while printing the whole page

I have asp.net page, in that page i have lot of design, and i have put one Iframe control. I am loading pdf in iframe. When i print the page, all the designs in the page are showing whereas the Iframe content showing as blank?
Can anyone suggest how to print the iframe content along with the page design?
I have asp.net page, in that page i have lot of design, and i have put one Iframe control. I am loading pdf in iframe. When i print the page, all the designs in the page are showing whereas the Iframe content showing as blank?
Can anyone suggest how to print the iframe content along with the page design?
The reason we use frames such as <Embed an <Object in <iFrame is so we can run one binary application/pdf window inside another binary application/html window.
Thus, if it's allowed, we print one or the other that are present in their own window.
It is often the case that a pdf is not reloaded into the browser after its downloaded by the inner framed application.
So you can print a web page natively by both applications as two pages, but thats not much use as an answer to your question.
The only reasonable solution is to capture the combined screen output, and for that we can press print screen or take a screenshot with yet another binary application, such as the operating system driving the screen.

Print preview of an .aspx page I made has its URL appearing three times on the page

I made an .aspx page with .VB in the code behind that all it does is pull data from a database onto an asp.net gridview to display a certain high school team's game schedule.
Some parents want to print the schedules, so when they pull up the print preview, the page's URL appears 3 times very predominantly just beneath the header of the page. Here's a screenshot of the print preview.
Any idea what's going on? I researched and found that it's possible to modify the styles specifically for a printing scenario, but I don't see what CSS code could possible fix this.
EDIT:
I actually figured out that the 3 URLs that appear under the header are the breadcrumbs of the page. I guess my question now is how do I hide them? I already tried adding display: none under a print media query.
Placing this in print css will hide the urls.
a[href]:after {
content:"" !important;
}

Troubleshooting in Chrome's Print Preview

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?

asp.net page not fully loading in IE6 from iframe

I have two iframes on a page, one of which displays a simple asp.net page, the other is used to display office documents, normally in the browser using an active x control.
This all works fine unless I 1: run on IE6 SP3 & 2: disable the activeX control and allow the document to be shown natively by the client (i.e in word etc.). When this happens the document is displayed with no issues, however the other iframe is either blank or just displaying the background image.
Using fiddler I can see that all content has come down so the troublesome iframe should render correctly, however when I view its' source all I get is the top part of the content, down as far as
var theForm = document.f
Does anyone have any ideas ???

How to debug IE print problem

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.

Resources