The list items on the moderator agreement have margin-bottom: var(--su16) !important; but no margin-top. This causes weird spacing of nested lists. Adding the mt16 class to every <li> on this page is the quickest solution.
This is only a symptom. The larger issue is that this page's HTML is not correct. It looks like:
<div><h1>Moderator agreement</h1></div>
<div>
<p>This is a preamble.</p>
<h2>Moderator side</h2>
<p>If you want to moderate the "Stack" Exchange "Network", follow these rules:</p>
<ul>
<li type="i">Don't feed the trolls.</li>
<li type="i">Don't ignore the CMs completely.</li>
<li type="i">
Long ol' paragraph about responsibility, various laws and regulations, and other boring stuff. This goes on for several lines. Here's the deal:
<ul>
<li type="a">Don't be evil.</li>
<li type="a">No making bank by selling user data to Equifax.</li>
<li type="a">Gossip is verboten.</li>
</ul>
</li>
<li type="i">Seriously, no gossip.</li>
</ul>
<p>No signing the company up to free samples.</p>
<p>Diamonds aren't mentioned in the UDHR.</p>
<h2>Company side</h2>
<ul>
<li type="i">Won't sicc the unicorns on you.</li>
<li type="i">Won't refuse to postpone invocation of the recusance of acceptance of legal responsibility for moderation actions. Also won't bill you.</li>
<li type="i">Charity!</li>
<li type="i">
Seven <u>business</u> days.
<ul>
<li type="a">
We're not dictators. Exceptions:
<ul>
<li type="circle">secrets; or</li>
<li type="circle">wrist-slapping.</li>
</ul>
</li>
</ul>
</li>
<li type="i">Dissent is permitted.</li>
</ul>
<h2>Accept the terms</h2>
<form method="post" action="about:blank">
… snip …
</form>
</div>Some problems with this:
- Use of
<ul>when the order is clearly significant:<ol>should be used instead. type="i"etc. on individual<li>s, when it should be on the lists.type="circle"when we're trying to number the list items.- Use of
<u>(indicates that a passage has a non-textual annotation) instead of<b>(brings attention to a passage). - The paragraphs before sublists aren't in
<p>. (This one's just my opinion.)
It should look something like:
<h1>Moderator agreement</h1>
<p>This is a preamble.</p>
<h2>Moderator side</h2>
<p>If you want to moderate the "Stack" Exchange "Network", follow these rules:</p>
<ol type="i">
<li>Don't feed the trolls.</li>
<li>Don't ignore the CMs completely.</li>
<li>
<p>Long ol' paragraph about responsibility, various laws and regulations, and other boring stuff. This goes on for several lines. Here's the deal:</p>
<ol type="a">
<li>Don't be evil.</li>
<li>No making bank by selling user data to Equifax.</li>
<li>Gossip is verboten.</li>
</ol>
</li>
<li>Seriously, no gossip.</li>
</ol>
<p>No signing the company up to free samples.</p>
<p>Diamonds aren't mentioned in the UDHR.</p>
<h2>Company side</h2>
<ol type="i">
<li>Won't sicc the unicorns on you.</li>
<li>Won't refuse to postpone invocation of the recusance of acceptance of legal responsibility for moderation actions. Also won't bill you.</li>
<li>Charity!</li>
<li>
Seven <b class="fw-normal td-underline">business</b> days.
<ol type="a">
<li>
We're not dictators. Exceptions:
<ol type="1">
<li>secrets; or</li>
<li>wrist-slapping.</li>
</ol>
</li>
</ol>
</li>
<li type="i">Dissent is permitted.</li>
</ol>
<h2>Accept the terms</h2>
<form method="post" action="about:blank">
… snip …
</form>
</div>These problems are exacerbated by the following primary.css bugs:
-
ol { list-style-type: decimal; } -
ul, ol, li { margin: 0; padding: 0; }
and the following stacks.css bugs:
-
ol, ul { list-style: none; } -
ol { list-style-type: decimal; } -
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; }
(/me to continue to insist that classy CSS frameworks and reset styles are fundamentally misguided, at odds with how the web works, and more trouble than they're worth.)
