How to align notes with text?

How to align marginalia with text being annotated, but to right of text?

[tdierks]

I'd like to add a section to my website where I provide annotated versions of several standards documents. These documents (RFCs & Internet Drafts) are delivered as monospaced text. I'd like to be able to render them in the same way, but hang notes referencing the text to the right of the main text, with the notes vertically aligned with the text they refer to. Using float with align=left places the note one line down, at least with IE6/Windows, and I'm generally concerned about the lack of any guarantee regarding where such a block element will be vertically rendered.

Any suggestions? The only thing I can think of which is guaranteed to work is to use a table with one <TR> per line of pre-formatted text, but the thought disgusts me.

I'm attempting to work in standards-compliant XHTML with CSS.

Thanks for the help.

[tedster]

How about using a margin-top:-1em; for each div that carries a note?

I recently had a similar challenge for adding notes to a translation. But I confess, I ended up using a table for layout. (Oh, the shame of it!) I didn;t think about a negative margin until you brought up the painful memeory here :)

[tdierks]

Yes, I've tried that, and it works OK (with the correction that the default line height isn't necessarily 1em, so I have to set the line height in the main text, then use that value negated for the top margin).

However, I'm pretty sure that I don't have any guarantee that browsers will all render that correctly, and I won't go so far as having to hand-tune the styles on a per-browser basis (I have a pretty technical crowd, so I think I can assume recent versions, but will need support for more than just IE).

My current best attempt is:
[dierks.org...]

As you can see, I've got a few problems (at least in IE):

- Note starts one line down from where it's inserted (right after the red text for each note).

- A tiny variation in the right margin of the body text where there's a note (as seen in the full-justified text). This isn't a problem for my case, actually, but I'm interested in what I'd have to do to get rid of it.

- If two notes collide, I can't explain why the rendering looks the way it does.

Thanks for any suggestions!
- Tim

[tdierks]

To add a reply to my own topic: the test page looks totally broken in Mozilla Firebird 0.6; I haven't tried anything else yet.

I [heart] HTML/CSS.

- Tim

[BjarneDM]

I'm on Mozilla 1.5rc2 and Safari 1.0 (v85) on Mac OS X 10.2.6

from what I can see you want the following:
1) create a padding on the main text with a width of 120px
2) write your notes in this padding

to push your note fully out into the padding your note margin-right must be greater than or equal to the width of the note. You've got it the other way round which is why the note is pushed into the body-text

DIV.maintext { text-align: justify; line-height: 1.2em; padding-right: 120px } DIV.note { background-color: yellow; text-align: left; float: right; width: 110px ; margin-right: -125px; margin-top: -1.2em; }
SPAN.note { }

The margin-top fix works in Mozilla 1.5, but in Safari it's pushed a line further up. I wouldn't worry that much about the Safari problem.

At present, I can't see a solution to the note overwriting problem

[tdierks]

Yeah, thanks. I'd noticed that when I tried it in Firebird. Unfortunately, I need to do two completely different things to make it work in IE and Firebird.

Test 1:
[dierks.org...]

Test 2:
[dierks.org...]

Test 1 in IE:
[dierks.org...]

Test 2 in IE:
[dierks.org...]

Test 2 in Mozilla Firebird:
[dierks.org...]

As you can see, doing the margins correctly (as I understand it) pushes the note further to the right in IE; if I use the values in your code, the note is pushed entirely off the page and doesn't render at all.

This looks like some IE-specific problem with the box model that I'll have to research.

Regarding vertical alignment, I'll have to see what I can figure out, or just eat the one-line error one way or the other (or split the difference).

Thanks for all your help and for any further suggestions!