This bug I just encountered in Firefox is almost legal drinking age in the US: bugzilla.mozilla.org/show_bug.

So if you want to work around list-style-position being broken for 20 years, do this: hide the standard list counters, use a custom counter, and set it to display in the ::before pseudo-element of your header. That provides the same effect.

e..g,

ol {
counter-reset: index;
}

ol li {
counter-increment: index;
list-style-type: none;
}

ol li h3::before {
content: counter(index) '. ';
}

@aral In the example bug36854.bmoattachments.org/at is there a good reason to use block elements inside the <li> tags? I get that <div> is block by default, and li>div { display: inline; } could also resolve the issue (in maybe a dirtier way), but why has the example explicitly set the <a> elements to display: block? Is there an accessibility or flow-on reason to do so that I'm missing?

@aral I get that, I just wondered why you wouldn't be able to do something like
li>h3 { display: inline; }
I figured there must be a reason the example explicitly set the <a> tag to block but I guess it was just to show the broken behaviour.

Follow

@aral and now I'm guessing your fix is more complex to resolve it without breaking it in browsers other than Firefox. Carry on.

· · Web · 0 · 0 · 1
Sign in to participate in the conversation
Aus.Social

Welcome to thundertoot! A Mastodon Instance for 'straya