meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

When Printing Maims

Okay, 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!

17 Responses»

    • #1
    • Comment
    • Wed 14 Sep 2005
    • 1631
    Dan wrote in to say...

    Try adding .column {float: none;} to the print style sheet.

    • #2
    • Comment
    • Wed 14 Sep 2005
    • 1642
    Eric Meyer wrote in to say...

    It’s always the simple things, isn’t it? You win, Dan! I’ll be in touch soon.

    • #3
    • Comment
    • Wed 14 Sep 2005
    • 2027
    Laurens Holst wrote in to say...

    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

    • #4
    • Comment
    • Wed 14 Sep 2005
    • 2029
    Laurens Holst wrote in to say...

    (using Firefox 1.5 beta 1 and the current version of ALA – dunno whether you already updated it on the live site)

    • #5
    • Comment
    • Wed 14 Sep 2005
    • 2211
    Roy Schestowitz wrote in to say...

    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.

    • #6
    • Comment
    • Wed 14 Sep 2005
    • 2211
    Eric Meyer wrote in to say...

    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!

    • #7
    • Comment
    • Fri 16 Sep 2005
    • 0239
    Jens Grochtdreis wrote in to say...

    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.

    • #8
    • Comment
    • Fri 16 Sep 2005
    • 1607
    Dan wrote in to say...

    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.

    • #9
    • Comment
    • Mon 19 Sep 2005
    • 1154
    Lou wrote in to say...

    Dan,
    Thanks for the interesting debugging tips.

    • #10
    • Comment
    • Thu 22 Sep 2005
    • 1646
    Dustin Diaz wrote in to say...

    Dan, thanks for the quick advice. was this in fact a bug or just a missed rule?

    • #11
    • Comment
    • Fri 23 Sep 2005
    • 0928
    Dan wrote in to say...

    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.

    • #12
    • Comment
    • Fri 23 Sep 2005
    • 1314
    Dan Davis wrote in to say...

    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…

    • #13
    • Comment
    • Wed 21 Dec 2005
    • 1937
    Gerry Quach wrote in to say...

    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 :(

    • #14
    • Comment
    • Wed 28 Dec 2005
    • 0913
    Saha wrote in to say...

    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.

    • #15
    • Comment
    • Thu 13 Apr 2006
    • 0352
    Jörgen Bang wrote in to say...

    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

    • #16
    • Comment
    • Thu 19 Jul 2007
    • 1819
    Andrew M wrote in to say...

    Just another tidbit of advice. Sometimes your print stylesheet will break completely if you don’t specify media=”screen” for your other stylesheets.

    • #17
    • Comment
    • Wed 7 Nov 2007
    • 1149
    Manjit Pardesi wrote in to say...

    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.

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


September 2005
SMTWTFS
August October
 123
45678910
11121314151617
18192021222324
252627282930  

Sidestep

Feeds

Extras