Forum Moderators: not2easy
I am on a project that regularly releases images to the public via blogging software. The software does not support a "print this page" type page (basic content without the site header, site navigation, etc)... so I added the functionality into the software (because our PR people want to quickly print a very friendly version of these posts to mail out to specific places). Everything works and looks fine. The page is incredibly simple, essentially a small header with title/author/date/logo/etc with the full post and subsequent images of the post below this (the main body/content). All of the post content is basic HTML markup and is formatted with a few very simple CSS rules.
My problem... When I go to print the page, everything prints perfectly. BUT... if an image (inside the post) happens to fall at the end of a page, the top portion of the image will get printed onto the bottom of page A and the rest of the image will get printed onto the top of page B.
Are there any CSS rules/manipulation that can force the printing to "push" the image to the next page if it will not fit on the current page? Or even other methods to accomplish this? I have messed around with rules like "page-break-inside" but to no avail.
Assistance truly appreciated!
I have tried putting 'page-break-inside:avoid' on both the image element (which is set to 'display:block') as well as the DIV that contains the image. Neither work.
Further ideas?
