HTML + CSS: Numbered list with numbers inside of circles

by

I’m using ideas that @Spudley has in his answer, and I’m using ideas from a previous answer I wrote:

See: http://jsfiddle.net/j2gK8/

IE8 does not support border-radius, and workarounds like CSS3 PIE do not work with :before. And, older browsers like IE7 do not support counter.

If you want to make it work in older browsers, you’ll have to resort to writing the numbers yourself. I also exchanged the fancy rounded corners for a normal image (which could have rounded corners, but doesn’t in my example):

See: http://jsfiddle.net/XuHNF/

So, there’s the fancy approach that won’t work in IE7+IE8, which probably rules it out. And then there’s the ugly, but compatible method.

Of course, there’s always another problem. If you have differing amounts of text, then this happens.

You’re then looking at this problem:

More Related Contents:

  1. Does UL have default margin or padding [duplicate]
  2. How to keep indent for second line in ordered lists via CSS?
  3. Li item on two lines. Second line has no margin
  4. How to display an unordered list in two columns?
  5. How can you customize the numbers in an ordered list?
  6. CSS: Control space between bullet and
  7. How to make a display in a horizontal row
  8. Responsive Separator for Horizontal List
  9. How to draw circle in html page?
  10. Easier way to create circle div than using an image?
  11. Removing ul indentation with CSS
  12. HTML + CSS: Ordered List without the Period?
  13. How do I justify a horizontal list?
  14. Best way to manage whitespace between inline list items
  15. Change the color of a bullet in a html list?
  16. Paragraph of text in circle using CSS [duplicate]
  17. HTML ordered list 1.1, 1.2 (Nested counters and scope) not working
  18. How to center an unordered list?
  19. HTML list-style-type dash
  20. Is it possible to specify a starting number for an ordered list?
  21. How can I prefix ordered list item numbers with a static string using CSS?
  22. Can you style ordered list numbers?
  23. CSS triangle containing text
  24. Adding text before list
  25. CSS Pseudo-classes with inline styles
  26. Browser Caching of CSS files
  27. How to change scroll bar position with CSS?
  28. How to cut a circular part from an image?
  29. How to keep :active css style after click a button
  30. CSS class starting with number is not getting applied

Leave a Comment