Hi,

Two questions.

First Question
I have two table of contents in my document. The first TOC is off by one page. See attached. "Introduction" is correct, but every page reference is one less than it should be.

<h2>Table of Contents</h2>
<div class="toc1"><a class="toc" href="#toc-intro">Introduction</a><br><a class="toc bookmark0" href="#toc-1">1) Register</a
>

<a href="#top" style="text-decoration:none"><h2>1)
<b>Register</b><br>
</h2></a>

div.toc2 h2 {
    page-break-before: always;
}

Second Question (related, I think)
Whenever I style with "page-break-before: always;" the new page has a top margin I can't get rid of. I've colored all appropriate divs to see if something is stretching into the area, but it just seems like user error or a bug. Thoughts?

Thank you!

1. Question 1 part A.jpg‎ 38.4 kB ‎
   Everything after "Register" is off by one.
2. Question 1 part B.jpg‎ 178.1 kB ‎
   "Introduction" on page 2, "Register" on page 3.
3. Question 2 part A-1.jpg‎ 146.7 kB ‎
   Why is "Resources" bumped down? This is true for all H2 tags.

Wrapping a block-level element (h2) in an inline level element (a) is not valid, and generally not a good idea. Where is the id attribute or anchor element that the toc is linking to?

Mike,

I figured out the off-by-one. I'm now linking to ID attributes instead of anchors.

I'm stilling having problems with my second question... how the top margins don't line up when I force a page break. Any idea on that? What information can I provide to help fix it?

Thanks! Caylan

If you have a heading element, you may need to explicitly zero out the margin, like this:

h2 { margin-top: 0 }

Mike, I've tried everything to get rid of the space. I can add more space, but setting zero for margin/padding/line-height, etc, doesn't get rid of that pesky top margin. I'm pasting in my CSS... and upon that, I see a #page top-margin set to 3.5em. I removed that and sure enough it got rid of the space. That said, why #page affect only forced-break pages?

@page {
  size: US-Letter; margin: 40pt 30pt 40pt 30pt; background: #FFF;
  font-family: sans-serif;
}

#page{
  margin: 0 auto;
  margin-top: 3.5em;          <-- Culprit
  font-family: sans-serif;
  text-align: left;
  background: #eee;
  border: 1px solid #fff;
  border-radius: 15px;
  width: 42.5em;
  min-height: 70em;
  box-shadow: 5px 5px 10px #888;
}

Forced breaks are under your control, while natural page breaks are not. Most of the time this does what you want, and box top/bottom margins will collapse with page top/bottom margins, unless the page has a border or padding.