Webpage comes out blank when print in firefox, prints fine in google chrome?

Question

This is the url of what I am trying to print
http://selfhelpcpc.org/calendar/action~month/exact_date~1391230800/
It prints everything EXCEPT for the data in the calendar! Which is what I need! I can see everything in print preview. but when I print it either to a printer or to a pdf, the data in the calender is blank!
This does not happen in Google Chrome, but I prefer firefox! And don't want to use 2 different browsers.
thanks any help would be great!

Answer 1

Sometimes it's hard to let go of a problem...
The events in the calendar are set to 85% opacity, meaning 15% transparency. For some reason, this is causing them not to print. Setting the opacity of those items to 100% (0% transparency) fixes it.
To test, you can use Firefox's Web Console.
First, select and copy the following long line of script:
var r="@media print{.ai1ec-month-view a.ai1ec-event-container{opacity: 1.0!important;}}"; var s=document.createElement("style"); s.type="text/css"; s.appendChild(document.createTextNode(r)); document.body.appendChild(s);
Next, while viewing the calendar in month view, press Ctrl+Shift+k to open the Web Console. Paste next to the caret (») and press Enter to run it. Then print (I've been testing by printing to PDF). Does it work for you, too?
In my opinion, you can get a more useful printed result with two other tweaks:
* Allowing the full descriptions to show instead of truncating them
* Adding page breaks before and after the calendar
This is the longer script incorporating those changes:
var r="@media print{.ai1ec-month-view a.ai1ec-event-container{opacity: 1.0!important;} .ai1ec-month-view .ai1ec-event{height:auto!important; white-space:normal!important;} #ai1ec-calendar-view-container{page-break-before:always; page-break-after:always;}}"; var s=document.createElement("style"); s.type="text/css"; s.appendChild(document.createTextNode(r)); document.body.appendChild(s);
Those changes will be visible in Print Preview in case you only want to print the actual calendar page(s) and not the before and after parts.
If you find that you need to apply this hack often, you can save it as a bookmarklet, which is a bookmark that runs a script. Here's the slightly modified script:
javascript:var r="@media print{.ai1ec-month-view a.ai1ec-event-container{opacity: 1.0!important;} .ai1ec-month-view .ai1ec-event{height:auto!important; white-space:normal!important;} #ai1ec-calendar-view-container{page-break-before:always; page-break-after:always;}}"; var s=document.createElement("style"); s.type="text/css"; s.appendChild(document.createTextNode(r)); document.body.appendChild(s); void 0;
Right-click the Bookmarks Toolbar or Bookmarks Menu (wherever you want to add the "button") and choose New Bookmark. Paste into the Location field, then assign a name (e.g., PrintCal) and click Add Bookmark to save it.
Alternately, since these are purely style rules, you could use the Stylish extension or the userContent.css file to apply them any time you visit the page. But it's late so that will have to be a subject for a different post.
Hope this helps.