Member Avatar for Siberian

Only in Web Kit Browsers am I experiencing a <OL> displaying the 1,2,3 within (literally) the text of a span tag. There is no 1,2,3 in the HTML, how do I remove ?

  • 2 Contributors
  • 2 Replies
  • 61 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by Siberian

Dani AI

Generated

What you are seeing, , are the browser-generated list markers from the <ol>, not hardcoded text. In WebKit, those markers can slip into the inline flow if the list picks up list-style-position: inside (often via a reset) or if the default left padding on the <ol> is removed. That makes the 1,2,3 render right where your <span> text starts, which looks like they are mashed into the text. See how marker generation and placement work in CSS: list-style-type, list-style-position.

Two clean fixes, depending on intent:

  • Keep numbering, avoid overlap:
ol {
  list-style-position: outside;
  padding-left: 2rem; /* restore indent so markers sit clearly outside */
}
  • Remove numbering but keep semantic <ol> (what @stbuchok suggested, expanded):
ol {
  list-style: none;
  padding-left: 0;
}

Troubleshooting tips:

  • In DevTools, check the computed styles on both <ol> and <li> for list-style-position and any zeroed padding. Restore the indent if needed.
  • Ensure list items still render as list items. If a reset set li { display: inline-block; } or similar, switch back so markers behave predictably:
li { display: list-item; }

If you want to tweak spacing or appearance without hacks, you can directly style the marker in modern browsers:

li::marker { font-weight: 600; }

Marker styling is widely supported now: ::marker.

Recommended Answers

All 2 Replies

Member Avatar for Member #905211

css: list-style-type:none;

Member Avatar for Siberian

Solved :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.