When Printing Maims
Published 18 years, 7 months pastOkay, ALA fans, we’ve deployed a print style sheet on the articles. I don’t know if I could call it done, but it’s a big step. Why wasn’t it online sooner? Say it with me: “browser bugs”. Just when the convergence of screen CSS handling had me feeling good, I had to go and mess with print styling. Good feeling’s gone.
At the moment, the print styles seem to work quite well in modern browsers except for Firefox 1.0.6 (which is what I have in OS X). There, when I call up a print preview, any article is fine until page 4. Then things go off the rails in short order. Content disappears, margins go wild, all kinds of fun stuff. Here, try previewing or printing Nick Usborne’s “Helping Your Visitors: a State of Mind. Now try it with J. David Eisenberg’s “Validating a Custom DTD” or (somewhat ironically) Ross Howard’s “High-Resolution Image Printing“. Pages 1-3 are fine for me, but after that, no good. When you get a nice long article like Joe Clark’s “Facts and Opinion About PDF Accessibility” or (completely ironically) my own “Going To Print“, you’re just asking for trouble.
I tried searching Bugzilla for some report, but my skills over there are not what once they were. So while I got a bunch of results, I don’t know if any of them described this problem. Could some kind soul let me know if there is a report on this sort of thing already? If not, I can submit the report. I just don’t want to add yet another DUPLICATE to the database.
And hey, if you can work out a solution to the problem, I have a factory-fresh ALA T-shirt all ready to send out—you even get to choose which one you want. Let me know.
Update: Dan Wilkinson is our winnah!
Comments (17)
Try adding .column {float: none;} to the print style sheet.
It’s always the simple things, isn’t it? You win, Dan! I’ll be in touch soon.
Does it also look like that when you actually *print* it?
I”ve seen the print preview do many strange things before, but when you really print it it turns out well.
Except for a background colour issue, where it gets expanded to all the pages below it.
But the problem as I can see it there looks like the common one which is not actually present when printing.
~Grauw
(using Firefox 1.5 beta 1 and the current version of ALA – dunno whether you already updated it on the live site)
I found that Firefox fails to print properly when the following, for example, gets used:
a[href]:after {content: ” “;}
Then again, IE does not even ‘understand’ what :after means.
I updated the live site just before posting my previous comment. So the problem, it would seem, has been fixed. Glad to hear it’s working in 1.5b1 as well!
Hi Eric,
even if you un-float everything on the page, a usual hint to work versus the Mozilla-bug, it is not said that this will work perfectly. Some months ago I worked on a print-stylesheet which worked perfectly, except for Mozilla. Only the first page was printed. Nothing was floated, so theoretically it should work.
I added a display: table-cell; to the main DIVs which were unfloated and weverything worked like charm.
I hope the Mozilla-developers will conquer this year-old bug soon.
And: thanks for the ALA-printstylesheet, it was a mess before after the relaunch.
In case any one would like to know how I went about figuring this out, my troubleshooting steps are below. Rather than reverse-engineer the whole site and track down every float and absolutely positioned item, I went for what seemed like a simpler and quicker approach.
1. Saved just the XHTML of Joe Clark’s article from ALA. Opened up the local copy in Firefox and did Print Preview. Noticed that the problem wasn’t there. So, I figured it must be caused by one of the styles.
2. Saved all the associated style sheets locally and change the XHTML to point to the local style sheets. Noticed that the problem returned.
3. Took out the style sheet references one by one and discovered that the problem only occurred with base.css.
4. Chopped out segments (in about 50 line increments) from base.css and reloaded Print Preview until the problem went away (about 3 tries). Once I had it narrowed down to 20 or so lines of code I looked for any suspicious floats. I tried removing them and the problem went away when I set .column {float: left;} to none.
5. Added .column {float: none;} to the local print style sheet to confirm that this was the culprit.
Dan,
Thanks for the interesting debugging tips.
Dan, thanks for the quick advice. was this in fact a bug or just a missed rule?
Dustin, I suppose it would technically qualify as a missed rule. From my perspective this means a “bug” in the style sheet. There are however, actuall “bugs” in Firefox’s Print Preview, as mentioned in the ALA article comments.
Geez, Dan, are you an old-skool Mac user, too? Your “debugging” tips smack of how we used to figure out Extension conflicts! :D Thanks for reminding me why I hate OS 9…
I came across the “floated content disappears when printed” bug as well recently, but the funny thing is that it only happens in Firefox 1.5, but not Firefox 1.0.4! This is for the exact same website (unfortunately it’s an Intranet site, so I can’t make it available for all to see).
I’m wondering whether it’s some kind of regression bug…
Incidentally, it looks like the “CSS background shrinks to tiny size when printed” bug still hasn’t been fixed :(
Some months ago I worked on a print-stylesheet which worked perfectly, except for Mozilla. Only the first page was printed. Nothing was floated, so theoretically it should work.
for my current project, removing floats would severely mess up the layout, so what worked for me getting printed pages look good in FF1.5 was doing what Jens Grochtdreis mentioned, and add display:table-cell to the div that wraps all the content (there always seem to be a div that does that)
cheers
Just another tidbit of advice. Sometimes your print stylesheet will break completely if you don’t specify media=”screen” for your other stylesheets.
Excellent advice here. I spent quite a long time wondering why my page is fine in ie7 and firefox when it comes to using my print stylesheet, but not in ie6, even though i had float:none.
Its was only here that i reelised that I my other base style sheet did not have a media type !!!!
Once I added screen as the media type to the base style sheet, all worked fine in ie6.