Question

I’m working on a web version of an old document, and it has sidenotes. I’ve managed to get it looking right in Firefox and Chrome, but there’s a problem with printing: the sidenotes are all jammed together at the top of the first page (image).

I’ve put up the first section of the old document here, so that you can try it out yourself: http://www.dinkypage.com/117588. As you will see with Print Preview, the paragraph numbers and page numbers work fine (with only one minor problem), it’s just the sidenotes that are causing a major problem.

I think the code is fairly easy to understand, but here’s the most important snippet of the CSS style:

.sidenote, .widenote {
    position: absolute;
    left: 745px;
    margin-top: 12px;
    text-align: left;
    line-height: 1.17em;
    font-size: 12px;}
.sidenote {width: 200px;}
.widenote {width: 400px;}
.sidenote span, .widenote span {
    display: block;
    position: relative;
    text-indent: 5px;
    padding: 0px 0px 8px 0px}

I’ve messed with the position:relatives and the position:absolutes, but I can’t get it to work properly. Any help would be appreciated. Thanks!

EDIT: I’ve put it up on jsfiddle, but it refuses to increment the page numbers for some reason: http://jsfiddle.net/KDzRp/

Answer 1

You need to specity “top” for “.sidenote, .widenote”, FF and Chrome can determine the Top of your absolutely positioned element by it’s appearance in the HTML, but older browsers (and apparently your printer) can not do so.

When using position:absolute always take care of both “hoziontal (left/right)” and “vertical (top/bottom)” position.

If you can not specify the exact top position of your site/wide notes, you need to wrap each page in a position:relative container and give top:0 to your sidenotes.:

<div class='page'>
    <p>...</p>
    <aside class='sidenote'>...</aside>
</div>

.page {position:relative;}
.sidenote {position:absolute; top:0; right:0; ...}

this way your sidenote will stick to the top of it’s own section.