Print styles

[Fati_Kom]

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

[ralphm]

We can’t debug images. Do you have a link?

[Fati_Kom]

@ralph_m

We can’t debug images. Do you have a link?

you can check print preview on website

[Fati_Kom]

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?

[PaulOB]

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.

[Fati_Kom]

@Paul_O_B

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!