I'm hand coding epubs, and the page breaks work fine. But when I use Calibre to convert them to mobis, the page breaks disappear. Here, there are two separate problems.
[Problem 1]
All chapters are in separate .xhtml files. I've opened each chapter with a small image (150 x 121) above the h1 words "Chapter number" followed by the h2 words "title of the chapter" for each chapter. The problem is, the epub chapters open with the image and title together. But the Calibre mobi opens with the image on a page all by itself. Then the text begins on the next page.
For instance, here's chapter one:
<p class="image-center-then-nobreak"><img src="images/eB1-1-00-WiseMenYinYang3.png" alt="The Wise Men's Orange Map"/></p>
<h1 class="h1" id="toc-anchor">Chapter 1</h1>
<h2 class="h2" id="toc-anchor-1">Truth Seeking…<br/>We All Do It</h2>
<h3 class="h3" id="toc-anchor-2"><b>Are You A Truth Seeker?</b></h3>
The entire body is then wrapped in a single div with no css or styles added.
The css for "image-center-then-nobreak" is:
p.image-center-then-nobreak {
line-height: 1.33em;
text-indent: 0;
text-align: center;
margin-top: 50;
margin-bottom: 15;
page-break-after: avoid;
}
I've tried wrapping it all in a div, putting the image inside the opening h1, etc. Nothing seems to help.
[Problem 2]
In the last chapter of one book, there are fifteen examples, each separated by a small image (144 x 110). I want each example to start on a new page. They do in the epub. But in Calibre's converted mobi, all the images and text lose their page breaks.
<p class="image-icon-center"><span ><img src="images/WiseMenGameLayout-03.png" alt="The Wise Men's Game"/></span></p>
<h4 class="h4" id="toc-anchor-13">GAME THREE</h4>
Here, the css is:
p.image-icon-center {
line-height: 1.33em;
text-indent: 0;
text-align: center;
margin-top: 50;
margin-bottom: 15;
page-break-before: always;
}
Any input would be greatly appreciated as I'm ready to start tossing things at the screen.
Thanks
Steven