Marginnotes don't appear in margin when in a list

[dmerrick]

I have a marginnote in an unordered list, it looks like this:

<ul>
  <li>Tufte-inspired stylesheet by <a href="https://edwardtufte.github.io/tufte-css/">tufte-css</a><label for="mn-6" class="margin-toggle">⊕</label><input type="checkbox" id="mn-6" class="margin-toggle"><span class="marginnote">Seriously, check out <a href="https://en.wikipedia.org/wiki/Edward_Tufte">Edward Tufte</a> and his work on information design</span></li>
</ul>

Unfortunately, the note text does not appear in the margin. Oddly, when the viewport is shrunk, I can click the "expand" icon and see the note inline, but when I restore the viewport to the original size, the marginnote disappears.

This is the same for sidenotes and unordered lists as well.

[crmackay]

I put your code above in between two paragraphs, and the marginnote showed up...its a bit misaligned, which should be fixed, but I can see it. Can you provide a bit more of a minimal example and perhaps a screen shot of the problem your seeing?

[dmerrick]

Thanks for responding, @crmackay!

Here's an example of this happening: https://www.dana.lol/2017/09/26/thanks/

[dmerrick]

Interestingly, if I wrap the <ul> in a <p>, I get this:

The *s come from the fact that this is written in Markdown.

[crmackay]

so the reason appears to be because you do not have your ul and ol elements inside a <section> ... </section> element.

[dmerrick]

Thanks, I was wondering if that was the case. I'm not a CSS guy so it's all kind of a mystery to me!

I added <section> tags and the sidenotes now appear, yay!

The last issue seems to be that the notes aren't aligned with the other notes:

[jez]

I think lists in general need a bit of TLC:

• Without wrapping list item bodies in <p> tags, the line height doesn't get set properly.
• With wrapping list item bodies in <p> tags, you get too much vertical spacing between list items, and the width of lists is constrained to 55% of the section width.
• Either way (<p> or no <p>), the margin notes don't show up at the correct alignment.

[daveliepmann]

I agree that lists need some TLC. I will not have time to look at anything Tufte CSS-related for a couple months at a minimum. PRs welcome, as long as they involve extensive testing to make sure we don't introduce any regressions. :)

[jez]

@dmerrick I have a fix for this in #118. If you could try it out and report whether it fixes the layouting issues you were getting, that'd be great!

[dmerrick]

Seems to work for me!