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:

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

CSS

  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; ...}

Problem:
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
<http://www.hucklesby.com/>
--



______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: