Previous Message
Next Message

Styling numbered lists

Sent by David Hucklesby on 21 December 2005 22:10

Hi Geoff,

You wrote:
> I am looking to style an ordered list with colored blocks with a
> number inside.

You've had some good suggestions already. Here's another I have used.
Only works if your numbers are single digits (1 -9) though:

            <li>1 some text here</li>
            <li>2 some more text that can span longer than one line</li>


  ol { list-style: none; padding-left: 2em; text-indent: -1em;}

  li:first-letter { float: left; font-size: ??; color: white; background: 
orange; line-height: 1.0; ...}

Does not degrade well with CSS off. The sequence number appears twice.
You could use UL for better degradation, perhaps?

Works in IE 5.5+ and other browsers I have tried. (Not IE 5.01 Win though).

Cordially, David
David Hucklesby, on 12/21/2005

css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: