I'd like to add a border around a DIV like this:

<div class="figure">
  <p class="title"><b>Figure&nbsp;5.1.</b></p>

  <div class="figure-contents">
    <div class="screenshot">
      <div class="mediaobject">
        <img src="resources/image.png">
      </div>
    </div>
  </div>
</div>

This doesn't have any effect:

div.figure { 
    border: black solid 3px;
    color: red;
    margin: 5em;
}

I want to use it in conjunction with the reordering CSS in this thread:
http://www.princexml.com/bb/viewtopic.php?t=1107
but I tested both with and without that CSS.

That looks like it should work; perhaps there is a syntax error somewhere earlier in the CSS file that is confusing the parser. Could you post or email me (mikeday@yeslogic.com) a small sample document that demonstrates the problem?

While trying to narrow down, I found that changing a block commented with // marks to /* .. */ marks made the problem go away. Interestingly rules after the 'div.figure' one are not ignored. This breaks:

// /* Page numbers */
// 
// div.book div.titlepage {
//     page: book-title;
// }
// div.book div.toc {
//     page: book-toc;
// }
// div.book div.chapter,div.part,div.glossary,div.appendix {
//     page: book-body;
// }
// 
// @page book-toc {
//     @top { content: "Table of Contents" }
//     @bottom {
//         content: counter(page, lower-alpha)
//     }
// }
// 
// @page book-body {
//     @bottom {
//         content: counter(page)
//     }
// }

/* Figures */

div.figure { 
    border: black solid 3px;
    color: red;
}

This works:

/* Page numbers */

/*
div.book div.titlepage {
    page: book-title;
}
div.book div.toc {
    page: book-toc;
}
div.book div.chapter,div.part,div.glossary,div.appendix {
    page: book-body;
}

@page book-toc {
    @top { content: "Table of Contents" }
    @bottom {
        content: counter(page, lower-alpha)
    }
}

@page book-body {
    @bottom {
        content: counter(page)
    }
}
*/

/* Figures */

div.figure { 
    border: black solid 3px;
    color: red;
}

The commented section relates to
http://www.princexml.com/bb/viewtopic.php?p=2909

If I uncomment it, I get undesired page breaks all over the place. Commenting it with either // or /* ... */ returns page breaks to normal, but then I don't have page numbers :?

Okay, // is not actually a comment in CSS, only /* ... */ is comment syntax.

What can I say, except: "duh " .. wish Prince told me that, though: "Eugh, what are these // lines you are feeding me?!"

Any guidance on the page breaks issue?