Ok, just to make this even simpler - I have removed the img and now use only text. The idea is that the "caption" should not break from the paragraph above it. Here is the code:
Code:
<?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">
p {padding-bottom: 25px;}
p.figure {page-break-after: avoid;}
p.figure_caption {text-align: center; font-weight: bold; font-size: .9em; page-break-before: avoid;}}
</style>
</head>
<body>
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
<p>line 5</p>
<p>line 6</p>
<p>line 7</p>
<p>line 8</p>
<p>line 9</p>
<p>line 10</p>
<p class="figure">This should be a block of text that is all contained within a paragraph and wraps across several lines. The following paragraph should not break to a separate page but should stay on the same page as this paragraph. This paragraph mimics the image that I am trying to test.</p>
<p class="figure_caption">This is the Caption</p>
</body>
</html>
On the iPad's display in portrait orientation, the caption appears on the second page and the paragraph above it, on the first page. Simply removing <p>line 10</p> results in everything rendering on a single page. With the page-break markup specified on the <p> elements, I would have expected the large paragraph and the caption paragraph to both appear on the second page if there was not enough room to display them both on the first page. I can't think of a simpler example than this. I also do not have any other way to test this other than on the iPad.
cheers,
Michael