TOC links point to wrong page!

[fluoresce]

The adventure continues! Whenever I think I have finished my first EPUB, I find another problem!

This time I have noticed that some of the links in my table of contents, generated by Sigil, point to the page before the destination page. This means that I have to click the link and then flip one page forward to arrive at my intended destination.

Having taken a close look, it only seems to occur whenever the destination is a h3 heading and the heading starts at the top of the page. My h3 heading elements have the largest top margins of all the elements in the EPUB, so I am assuming that some of the top margin is being left on the previous page.

Is this possible? Has anyone ever experienced this problem?

[fluoresce]

Note that when I check the TOCs in Sigil, every link works perfectly. The problem occurs in ADE and Kindle for Android.

[fluoresce]

Ohhh! I see what's going on . . .

My TOC is three levels deep (h1, h2, and h3). As chapter headings and subheadings, my h1s and h2s all start at the beginning of a HTML document. My h3s are the only headings that are placed throughout the body of the content. In order to push the h3 headings down, I have assigned them large top margins. Whenever a h3 heading happens to start at the top of a page, the top margin is being split between the top of the page and the previous page. If I adjust the font size and thus move the h3 headings away from the top of a page, the problem goes away.

I think I can fix this problem by giving the h3 headings the same sized top margin as the previous element's bottom margin. Lemme see . . .

[GrannyGrump]

Try using padding-top instead of margin-top. That will place the whitespace within the h3 "block" instead of above it. I use padding for all chapter headings, and seems to work always.

[fluoresce]

Originally Posted by GrannyGrump

Try using padding-top instead of margin-top. That will place the whitespace within the h3 "block" instead of above it. I use padding for all chapter headings, and seems to work always.

Thanks, Granny. I tried it, but it didn't work. The margin still seems to be split between the previous and actual page.

Check your books. I bet the same thing happens.

[fluoresce]

I need a space above my h3 headings. How do I do it without experiencing this problem?

Any suggestions will be appreciated.

[Toxaris]

You will always have issues when the header doesn't quite fit on the page. If you want a margin above a H3 and have the H3 always at the top of a page, the most consistent manner would be to give the H3 a separate page/XHTML file.

[fluoresce]

Originally Posted by Toxaris

You will always have issues when the header doesn't quite fit on the page. If you want a margin above a H3 and have the H3 always at the top of a page, the most consistent manner would be to give the H3 a separate page/XHTML file.

Thanks, Toxaris.

The h3s are distributed throughout the body of the content. Whenever one of them happens to be at the top of a page, the TOC link that points to that h3 header instead points to the previous page, as if a piece of the h3 header's margin is being left on the previous page.

I suppose the only two ways of fixing this issue are to either do as you say and place each h3 at the top of a new document or push each h3 down with the previous element's bottom margin.

[BobC]

Originally Posted by fluoresce

Thanks, Toxaris.

The h3s are distributed throughout the body of the content. Whenever one of them happens to be at the top of a page, the TOC link that points to that h3 header instead points to the previous page, as if a piece of the h3 header's margin is being left on the previous page.

I suppose the only two ways of fixing this issue are to either do as you say and place each h3 at the top of a new document or push each h3 down with the previous element's bottom margin.

Or style the h3 element as

page-break-before: always

to force a new page with each h3.

BobC

[Phssthpok]

Originally Posted by fluoresce

I suppose the only two ways of fixing this issue are to either do as you say and place each h3 at the top of a new document or push each h3 down with the previous element's bottom margin.

To make it easier, instead of tracking down and fixing every preceding element, you could just insert and extra div before each h3 to give you your margins: i.e. replace every occurrence of "<h3" with "<div class='h3-margin'/><h3" and define h3-margin as "margin-top:5em" or whatever.

[JSWolf]

If you want to have a page break at every <h3>, then the best solution is to start a new file at every <h3>.

[Phssthpok]

Originally Posted by JSWolf

If you want to have a page break at every <h3>, then the best solution is to start a new file at every <h3>.

I think the idea is not to have a page break at every <h3>, but to link to the text rather than the top margin of the <h3> when the top margin appears at the bottom of one page and the text appears at the top of the next page.

[JSWolf]

Originally Posted by Phssthpok

I think the idea is not to have a page break at every <h3>, but to link to the text rather than the top margin of the <h3> when the top margin appears at the bottom of one page and the text appears at the top of the next page.

In that case, for the <h3>, don't use a top margin. It doesn't work when the margin falls at the bottom of the screen. Use padding-top instead. That does work.