printing cuts image in two - HTML Forums

shawninder · 06-29-2009, 03:46 PM

Hello,

I have encoutered an odd problem and have no idea as to what is causing it. But I managed to find two different ways of reproducing the "bug".
Let's start with the basic code:

Code:

<html>
	<head>
		<style type="text/css">
			.graphStats { height: 350px; width: 350px; }
		</style>
	</head>
	<body>
		<img class="graphStats" src="http://mescoupsdecoeur.m.e.pic.centerblog.net/whi17iuw.jpg" alt="Titre" />
		<img class="graphStats" src="http://mescoupsdecoeur.m.e.pic.centerblog.net/whi17iuw.jpg" alt="Titre" />
		<img class="graphStats" src="http://mescoupsdecoeur.m.e.pic.centerblog.net/whi17iuw.jpg" alt="Titre" />
		<img class="graphStats" src="http://mescoupsdecoeur.m.e.pic.centerblog.net/whi17iuw.jpg" alt="Titre" />
	</body>
</html>

I stripped this page down to its minimum for simplicity. When I hit the print preview button, I get a beautiful display of the images one above the other. Having no place at the bottom of page one, the third image is pushed down to page two. Perfect.
Now lets try the same code, with a slight difference (in red)

Code:

<html>
	<head>
		<style type="text/css">
			.graphStats { display: block; height: 350px; width: 350px; }
		</style>
	</head>
	<body>
		<img class="graphStats" src="http://mescoupsdecoeur.m.e.pic.centerblog.net/whi17iuw.jpg" alt="Titre" />
		<img class="graphStats" src="http://mescoupsdecoeur.m.e.pic.centerblog.net/whi17iuw.jpg" alt="Titre" />
		<img class="graphStats" src="http://mescoupsdecoeur.m.e.pic.centerblog.net/whi17iuw.jpg" alt="Titre" />
		<img class="graphStats" src="http://mescoupsdecoeur.m.e.pic.centerblog.net/whi17iuw.jpg" alt="Titre" />
	</body>
</html>

I hit the preview button again (Please try it yourself to see the problem). This time, the third image is cut in two and each half is displayed on a seperate page. This is what I can't get my head around. What is causing the image to break?

Here is another version of the code with another slight difference (in red)

Code:

<html>
	<head>
		<style type="text/css">
			.graphStats { float: right; height: 350px; width: 350px; }
		</style>
	</head>
	<body>
		<img class="graphStats" src="http://mescoupsdecoeur.m.e.pic.centerblog.net/whi17iuw.jpg" alt="Titre" />
		a
		<img class="graphStats" src="http://mescoupsdecoeur.m.e.pic.centerblog.net/whi17iuw.jpg" alt="Titre" />
		<img class="graphStats" src="http://mescoupsdecoeur.m.e.pic.centerblog.net/whi17iuw.jpg" alt="Titre" />
		<img class="graphStats" src="http://mescoupsdecoeur.m.e.pic.centerblog.net/whi17iuw.jpg" alt="Titre" />
	</body>
</html>

you see the red "a"? If I take that out, the third image is pushed down to the second page. If I leave it in, the third image is cut in two. If I take the "a" out and put it after the third or fourth image, no problem, but if I put it after the first or second image, image breaks.

Does anyone have a clue what's happening here?

Thanks in advance

Shawn

Sawtooth500 · 07-02-2009, 01:05 AM

I'm uncertain as to what you are trying to accomplish here...

In your base code you say that the images display vertically one above each other. For me, they all display horizontally. If you put display to block then they all display vertically. Also when you say "the third image is cut in two and pushed to the next page" HTML files don't get cut into pages, you just scroll down...

Please clarify what you are trying to accomplish and what you mean by the images are getting cut.

shawninder · 07-03-2009, 09:34 AM

Let me try to rephrase this.
The problem occurs when I want to print.
I click File -> Print Preview to get a preview of what the printed page will look like, and that is when the scrollable page is cut into multiple pages. The problem is that the third image, instead of appearing on the second page when the first page is full, is cut in two and displayed on two seperate pages (In the print preview screen)

As for my multiple example, they were my attempts at figuring out what exactly the problem is.

So to put it simply
problem: image is cut in two in the print preview window
what I'm trying to accomplish here: Find a solution (idealy css) that will prevent any image from beign cut in the print preview window (nor on the actual paper after print)

Does that clarify a bit?

P.S I subscribed to this thread using Instant email notification, but did not receive any email, what should I do?

Sawtooth500 · 07-03-2009, 03:22 PM

In that case this should help:

http://www.tech-recipes.com/rx/616/h...-a-page-break/

shawninder · 07-03-2009, 03:54 PM

The code I gave you is stripped down to it's bare minimum. My real situation is a huge page full of dynamically-fetched content and the problem images are php-generated graphics. It is very difficult to know when and where to add a page break since more than one of these graphics go on a same page.

Your solution is good and if I find nothing else, I will use it. But it doesn't completely solve my problem. Indeed, if I choose to add a page break before each image, then I will never be able to print two of these images on a same page...
I wonder if there is a way to specify that the page break should only happen if something is about to break. Do you think?
(I already tried auto, the third image still breaks, have a try on my first example with display: block added)

Thanks a lot, I think we're heading in the right direction here.

Shawn