Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Printing cuts php-generated image in two

    Hello,

    I'm making a web application for my school and have run up with a strange problem. Or at least I have never seen this kind of thing happen before.
    First of all, an image is worth a thousand words:



    Problem
    Look at the second graph. For some reason, it is cut in half when I view the page in "print preview" mode.

    Tested on
    This happens in IE 7 and Firefox 3. Opera 9.64 has other problems but handles this very well. As for chrome 2 and safari 4, I can't find any print preview option.
    All of these have been tested on windows xp sp2.

    Details
    Unfortunately, this section of the website is accessible only to administrators so you can't go and see it live. Here is the relevant code:

    The graphs are generated using php (jpgraph: http://www.aditus.nu/jpgraph/index.php) and inserted in the page like this:
    PHP Code:
    echo("<img class=\"graphStats\" src=\"statistiques/pieGraph.php?noGraph=".$noGraph."\" alt=\"".$titreGraph."\" />"); 
    in the CSS, the image is floated to the right of the table.
    Code:
    .graphStats
    	{
    		float: right;
    		margin-top: 20px;
    	}
    If you prefer, here is a reproduction of the problem:
    Code:
    <html>
    	<head>
    		<style type="text/css">
    			.graphStats { display: block; height: 350px; }
    		</style>
    	</head>
    	<body>
    		<img class="graphStats" src="SiteWeb_V5/statistiques/pieGraph.php?noGraph=1" alt="Titre" />
    		<img class="graphStats" src="SiteWeb_V5/statistiques/pieGraph.php?noGraph=2" alt="Titre" />
    		<img class="graphStats" src="SiteWeb_V5/statistiques/pieGraph.php?noGraph=3" alt="Titre" />
    		<img class="graphStats" src="SiteWeb_V5/statistiques/pieGraph.php?noGraph=4" alt="Titre" />
    	</body>
    </html>
    Hit print preview and you get this:



    Attempted solutions
    It is peculiar because it's the first time I ever see an image break when printing if it's small enough to fit on a page. Does it have something to do with the fact that it's generated by php? I tried to make another non-php image break, but did not succeed.
    Maybe what I need is a bit of nifty CSS?

    Anyways, thanks to anyone who has a take on this.
    Last edited by shlagish; 06-22-2009 at 05:03 PM. Reason: Added information as to which php library I am using to generate the graphs
    Shawn

  • #2
    New Coder
    Join Date
    Jun 2009
    Location
    Bangalore, India
    Posts
    42
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by shlagish View Post
    Does it have something to do with the fact that it's generated by php?
    Nope..

    Are you sure the image is smaller than the page? I can't think of any other reason..

  • #3
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts

    The image is not too big for the page

    No the image isn't too big, in fact, I set the image dimensions through css makign SURE they fit the page...

    Since my last post, I have narrowed the situation down to the basic elements

    Exhibit A: Here is an example code in which the third image is pushed down to the second page because it would not fit on the first one. It is not cut. This is how I expected things to work -> perfect
    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>
    Exhibit B: This time, the same code is used, but with display: block added to the images. The third image is cut in half and seperated on the first and second pages -> not so good
    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>
    Exhibit C: This time again, same code, but instead of display: block, I use float: right; This time everything works as it should and the third image is reported to the second page -> perfect
    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" />
    		<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>
    Exhibit D: Same code as the one above, the only difference, is I add the letter a after one of the two first images. This time, the third image is cut in half -> not so good

    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>
    In the example above, if the a follows one of the two last images, everything displays nicely

    Does anyone understand what's happening here?

    (these tests have been conducted with firefox only. Apparently, IE doesn't care wheather there is an a or not, it cuts the image all the time)

    b.t.w There is not more php left in my problem, this thread should probably be moved to html & css forums
    Last edited by shlagish; 06-22-2009 at 08:28 PM. Reason: specify the browser with which I tested
    Shawn

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm allowing myself to bump this thread once since it has just been moved to the HTML & CSS forum
    Shawn


  •  

    Posting Permissions

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