SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble Modifying Stylesheet for A Printer-Friendly Version

    I'm trying to make some changes to my stylesheet to create a simple printer-friendly version that eliminates most of the extra except the main content. However, I am having a couple issues, depending on the browser used.

    the site

    If you visit the site via link above, and go to 'file - print preview', the issues are pretty noticeable.

    Firefox: First, the first page is mostly blank. The top_subsection div tag seems to sit right in the middle of the page with lots of blank space above and below it. This is the 'recent news' section on the home page.

    The content_subsection starts at the top of the second page.

    Another weird thing that I notice is that the footer starts at the top of the third page - even if the content section is not finished. It just gets squeezed up there at the top anyways, rather than being placed with the flow of the page at the end of the content.

    IE7: The first page has the title, but is completely blank after that. The rest of the pages to be printed seem better than in Firefox, as the top_subsection doesn't have lots of space around it, and the footer falls at the end as expected. The content section is moved to the right which is odd, however.

    I guess I'm not sure the best way to create a printer-friendly stylesheet, as this is my first time attempting it. It seems that it should be straightforward, but errors still occur.

    I'm also not sure how the CSS chosen to use is determined. For example, why is Firefox printing differently than IE7? The markup is pretty straightforward I think, and if the printed page simply printed with the flow of markup, then the footer should always fall at the end of the content, but in Firefox it does not.

    Is there a better way to create a printer friendly version than using the method I have done? (Opened up original style sheet and removing extraneous styling and sections, attaching to page using media=print)

    Finally - is there a method that can be used to tell the printer not to split a certain section between two pages? For example, I have tables, and sometimes those tables fall on the page split line and half the table is on one page and the other half on the next page. It would be nice to tell it to just put the table at the start of the next page rather than splitting it.

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In your print stylesheet you need to reset the absolute position of the <h1> :
    Code:
    .top h1 {
    	position: static;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried what you said, but I did not notice any changes in either Firefox or IE7. I also tried modifying the top class itself without any noticeable results.

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Print & preview works fine for me in FF now ......

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I'm also struggling with printing styles and one of the things that might affect FF is it doesn't like to finish any broken floats (if a floated whatever is so large that it doesn't fit on a page, FF doesn't seem to want to continue it on the next page) and seems to hate breaking fieldsets (I have this right now) in forms

    If you're needing to reset everything, go the other way:
    set your regular stlyesheet to media="screen, projection" and the printing one for media="print" only. This way, instead of needing to undo all the styles from the screen sheet, you start out with a completely unstyled page first (and do a print-preview on that), and style from there. Maybe do the print preview after setting all the stuff your hiding to display: none. Then you'll see where FF and IE (and Opera and SaffyChrome and Konq and...) are starting from. That might be much easier.

    I found some sites talking about FF's issues and someone linked to the CSS paging commands page-- however I'm still not sure how or even if they work, with FF, but you're supposed to be able to manually set page breaks in any browser (just a question of, who supports it?).

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I'm also struggling with printing styles and one of the things that might affect FF is it doesn't like to finish any broken floats (if a floated whatever is so large that it doesn't fit on a page, FF doesn't seem to want to continue it on the next page) and seems to hate breaking fieldsets (I have this right now) in forms

    If you're needing to reset everything, go the other way:
    set your regular stlyesheet to media="screen, projection" and the printing one for media="print" only. This way, instead of needing to undo all the styles from the screen sheet, you start out with a completely unstyled page first (and do a print-preview on that), and style from there. Maybe do the print preview after setting all the stuff your hiding to display: none. Then you'll see where FF and IE (and Opera and SaffyChrome and Konq and...) are starting from. That might be much easier.

    I found some sites talking about FF's issues and someone linked to the CSS paging commands page-- however I'm still not sure how or even if they work, with FF, but you're supposed to be able to manually set page breaks in any browser (just a question of, who supports it?).
    Ah! So in my first version, I did not have a media type for my standard stylesheet. So this means when going to print, it was applying both that stylesheet AND the print stylesheet that I added - and I suppose the print stylesheet overwrites the default if needed.

    By adding media="screen, projection" to the standard stylesheet, the print preview is working pretty much as I originally wanted without further modification. If I do want to modify, it seems like it will be much easier to style a print stylesheet from scratch, now that I can. I didn't want anything fancy for the print stylesheet anyways, so this should be fine.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •