CSS Printing

HTML & CSS
1

Hi All, I’ve been trying to get this working well for a few hours now, and still not quite right …

I have a page with a dedicated CSS file for printing. The problem I am gettign right now, is that in IE the first page that prints is blank. In Chrome it prints correctly.

Any ideas? I have gone through my CSS file and set DIV positioning to static, and set display to none for any items I did not want printing out.

Thanks!

I’ve attached my print CSS file.

2

Hi,

The only way to debug would be with the real page html and css so do you have a link?

Printing is often the most buggy and irrational part of CSS and a solution is usually only found through trial and error and stripping the page down to find out what is causing the problem.

Floats, widths, heights, positioning and overflow can all cause problems and should be avoided where possible in the print stylesheet. Long tables can also cause problems.

3

Hi Paul,

Thanks for the hints … The page is on an intranet, so not publicly accessible.

I do make use of a number of those items, so I will continue to strip what I can out of the stylesheet. I didn’t realize that the width and height can also cause problems. …

I’m close to getting it all working ok, it’s just the blank first page that is driving me nuts. I’m sure I’ll find it.

Thanks!

4

I do make use of a number of those items, so I will continue to strip what I can out of the stylesheet. I didn’t realize that the width and height can also cause problems. …

Unfortunately sometimes stripping the page down is the only way to find out the cause. I usually make a working copy of the page (assuming that’s possible) and then can strip it down quickly without worrying too much about breaking things.

5

Hey Paul, I got it figured out. Thanks for the tips. I had one of my DIV’s tagged as display: inline that was causing the problem.

It all looks nice and neat now and prints out as expected now.

Thanks!

Tim

6

Glad you got it sorted and thanks for letting us know :slight_smile:

7

In one respect they can be a godsend - most browsers will repeat the thead elements on each page printing - if you go in expecting this behavior it can be of great aid to making the print layout a great one.

I would also guess that tfoot elements likewise get repeated on all pages, but I’ve never tried this.

You are right though, css print specifications are one area that is horribly undeveloped. Just a few things I’d love to have the ability to do

  • I do NOT want the page url on the header and footer of every page. This unhelpful behavior caused my current employer to resort to an activeX plug in to be rid of the behavior in IE at least (but shackling the site to IE only in the process)
  • Loss of backgrounds is a pain. The current behavior is fine if there is no print specific stylesheet - but browsers honestly should print any background called out on a print specific media or at least ask the user if they want to do this.
  • Why in the world can’t the browser manufacturers other than Opera get the print properties right?? There’s only 5 of them for crying out loud - orphans, page-break-after, page-break-before, page-break-inside and widows.
  • A property to get an element to repeat on all pages or on specific pages in the manner of the thead element now, or even better appear on certain pages.
  • Page psuedo elements - :nth-page(even), first-page, last-page. nth-page would work exactly as nth-child.

That alone would make me happy.