1

We are trying to use an @media print.css style sheet to enable a web page to print a set of Avery labels (6 up on a sheet - 4" x 3"). Generally a print media style sheet seemed like a perfect solution to having a page that looks like a list on screen, but when you print the list you get imprinting for Avery badges!

The challenge is in the details though. In addition to the fact that each browser seems to have unique interpretations of print styling and some of the rules just don't work. I've seen and studied most of the basic info readily available on using the print.css. It's fairly easy to override font colors with black and set details to print or not but what this assignment needs is precise element placement and styling within the @page details.

The site already features Bootstrap and other linked .css pages though I've unlinked them to test the pages and am trying to isolate out anything that could also be interfering with print styling.

It appears that float isn't working in IE. Our list page content to print lays out in floated divs in Chrome but font styling and other divs aren't rendering as intended. Firefox isn't displaying any of the required print content but indicating page numbering appears to agree with Chrome that there are 56 pages of labels, (sorry if you can't see them?) My hope is that this document can serve as a repository for the tips tricks and limitations of media @print.

Jonny Shaw
  • 117
  • 10
  • So far all I've been able to find is the "basics" of setting up a print style sheet. Stuff I'd consider more common sense design rather than technical limitations. For example, set nav details to display: none; and all text to color: #000. I've discovered on my own that Floats don't work well (esp. in FF) and that things like Margin's and font access is "iffy at best". I've even seen where trying to set page-breaks for after or before a badge isn't working as expected. Seems @print is for appearance only? – Jonny Shaw Mar 24 '14 at 20:17
  • Are you using a reset to remove all of the browsers default styling which is causing the differences? Here's a pretty standard one: http://meyerweb.com/eric/tools/css/reset/ – davidcondrey Sep 22 '14 at 01:08
  • possible duplicate of [How to get cross browser compatibility in Print on page from all browsers?](http://stackoverflow.com/questions/3697444/how-to-get-cross-browser-compatibility-in-print-on-page-from-all-browsers) – davidcondrey Sep 22 '14 at 01:09

1 Answers1

0

I'm experiencing the same problem. I need to print onto specific Avery labels at exact dimensions and although I can get it to work with Chrome (despite it ignoring some Print CSS styles) - it doesn't work in Firefox. Safari seems to be in it's own world also.

I think the only way I'm going to solve this is to generate PDF's that the user has to download and print (or print the PDF's from their browser).

Sucks, but haven't found any solutions for a "CSS Print Browser Reset".

joelataylor
  • 193
  • 1
  • 4
  • 13
  • Thank you Tyler, at least I'm not the only one perplexed by this. The link placed above has some helpful guidelines but may not be very thorough. I suppose it will be up to us to document the detail differences regarding what browsers do what and when. Another "Job I don't have time for but really wish I did" and yes, if I am able to find it or make it I'll share it. I too don't love the need to save to a .pdf and print that if that step can be avoided. – Jonny Shaw Sep 26 '14 at 16:04