Jellby, no joy with your suggestions. I have tired every combination of page break before/after/inside that I can think of and nothing works! I have a test file that shows the image on the first page and the caption breaks to the second page. If I remove 1 line of text above the image/caption, both the image and caption appear on the first page.
I had posted this over in the Apple iPad forum and someone said they got it to work but did not show how nor answer my request for help. I suspect they did not get it to work.
Here is the code for the page:
Quote:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div.figure {text-align: center; margin-bottom: 1em; margin-left: 8%; margin-right: 8%; page-break-inside: avoid;}
img.figure_image {border: 1px solid #808080; page-break-after: avoid;}
p.figure_caption {text-align: center; font-weight: bold; font-size: .9em; margin-top: .5em; margin-bottom: 0em; page-break-before: avoid;}
</style>
</head>
<body>
<p>line 1<br /></p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
<p>line 5</p>
<div class="figure">
<img class="figure_image" src="../Images/Figure%206-5.jpg" />
<p class="figure_caption">This is the Caption</p>
</div>
</body>
</html>
|
The image is a jpg at 680x800 pixels and 72 ppi. Just resize an image to those dimensions and change the name above if you want to try it.
regards,
Michael