SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Print styles

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Print styles

    Hi ,
    I need to set up a print style sheet ...there are a few bugs in the layout that I can't resolve...

    • page breaks after the image , even though I have added page-break-inside :avoid to the containing div and the image repeats itself on the next page :S( please see print_bug1)



    • Firefox is not showing all images(please see print_bug2)




    • ...and the image div is overlapping in Chrome with the description div....any help would be greatly appreciated..(please see print_bug3)



    For details please see the attached screenshots.
    Thanks
    print_bug1.PNGprint_bug2.PNGprint_bug3.PNG

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    We can't debug images. Do you have a link?

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    We can't debug images. Do you have a link?
    you can check print preview on website

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi everyone , I have figured out the problem , but am still looking for a solution , the problem is , that page-break-inside and page-break-before or after work only in certain browsers...the layout it not breaking in IE , its relatively better in Chrome , but not working at all in FF...my problem is ...that I have a row of tables , each table contains the product image and the product description and the page is breaking inside the table....I don't want the table to break....but I can't do this using the page-break css properties....is there any other way that I can do this?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Generally you would create a much simpler layout for print with your print stylesheet and avoid table like structures or floats and take a more linear approach with one element following the next and with as little styling as possible (e.g. remove all widths, heights, positioning , floats etc). However as you have used tables this could be quite difficult to manage and would have been easier if tables for layout was not used and used css display:table instead.

    A quick fix you might like to try is to remove the absolute positioning by adding this to your print stylesheet.

    #productsTable td.imageThreeColumn{
    position:static!important;
    }
    I can't guarantee it will work but seems to behave better in print preview although you do get the odd blank page.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Generally you would create a much simpler layout for print with your print stylesheet and avoid table like structures or floats and take a more linear approach with one element following the next and with as little styling as possible (e.g. remove all widths, heights, positioning , floats etc). However as you have used tables this could be quite difficult to manage and would have been easier if tables for layout was not used and used css display:table instead.

    A quick fix you might like to try is to remove the absolute positioning by adding this to your print stylesheet.



    I can't guarantee it will work but seems to behave better in print preview although you do get the odd blank page.
    Thanks for the help..It's MUCH better in FF and IE now!


Tags for this Thread

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
  •