HTML + CSS: Numbered list with numbers inside of circles

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

  • How to use CSS to surround a number with a circle?


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):


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:

  • CSS Floating Divs At Variable Heights

Leave a Comment