Originally Posted by Jellby
Well, the pseudo-elements are not listed in the ePUB spec
That's a long read...
I glanced through it, no mention of pseudo-elements, as you said.
Bookmarked it -- when/if I start to convert to ePub, I'll definitely need to know it.
Hmm... I think you'd have to add some specific css for browsers showing a bottom border.
I've been playing around with CSS all day -- now the answer seems obvious, just add a border-bottom
to all the div
s. As my div
s are only where the page-breaks must occur structurally, it's perfect.
In print-preview, Firefox doesn't display them, but I have no idea if they'd show up in a reader right before the page-break -- I haven't tried this with FBReader yet.
A border occuring before
or chapter heading would probably be very obvious (as you suggest below,) but at the end of a chapter maybe not-so-much. I'm using page-break-after
, as my files start with div
s right out of the gate, and I don't want a page break before the first one -- but after the last
one is no big deal.
In terms of separating rules, I suppose the easiest thing would be an @rule and some specific CSS files -- but are most readers supporting them (@rules?)
Note that, apparently, vertical space must be discarded after a pagebreak. So that, if you have a <hX> after a pagebreak, no matter how much margin-top you assign it, it will be flushed to the top of the page (or so it should). To avoid this, I had to add manual pagebreaks:
... and I could change the css for browsers:
<div class="pagebreak"> </div>
border-width: 1px 0 0 0;
margin: 0 -2.05% 0 -2.05%;
Does a div
satisfy that vertical consumption? I'm working with a div
starting after every page-break right now -- then the h#
element occurs. (Or img
, etc.) If it does, then probably it won't be an issue for me -- but it is important to know, for when I'm not using div
s like this.
I've been thinking about using hr
for manual page breaks, but the more I consider, the less I like it. Almost empty div
s don't excite me either. I feel like I'm missing an obvious something-or-other...
I have some images that I'm using for navlinks within the ebook (prior chapter, TOC, next chapter) and all is good, in terms of floating it to an interesting place -- but there is some sort of gap underneath all three images. I've tried removing the margins and padding from the containing a
as well as the img
tag itself. Any idea what it could be?
Here's the xHTML
<div class="Body Logue" id="Body_0">
<img src="images\chapter_up.png" />
<img src="images\toc.png" />
<img src="images\chapter_down.png" />
<h4>To the Reader of this Work</h4>
And here's the current CSS:
margin:0% .5% 0% 0%;
border:2px solid #420342;
Is it some sort of browser thing? Both IE and Firefox display it. I'd really like them to butt up cleanly to one another (They're being displayed vertically, which I dig.)
m a r