Styling ordered list numbers/letters?

Graft-Creative

03-08-2005, 11:25 AM

Hi, I've searched and not found anything, so here goes:

How do you style the list item numbers or letters in an ordered list? Like making the numbers bold/different colour/font/size?

Maybe it's a dumb question, I dunno, what I do know - is that I can't think of the answer :o

Any help would be greatly appreciated.

Kind Regards,

Gary

ronaldb66

03-08-2005, 12:49 PM

I'm afraid there's nothing much to do; these list markers are generated content, so I think they adopt the styles specified for the list items themselves.
Generating them yourself I guess would offer more posibilities, but of course IE doesn't support that... :mad:

One way I can think of right now is to use background images; I've seen this done in a very appealing way, but this would mean id'ing every single list item and would require a bundle of images.
You can of course always check the specs (http://www.w3.org/TR/2004/CR-CSS21-20040225/generate.html) for more details; be aware though of browser support issues.

rmedek

03-08-2005, 03:33 PM

Maybe style the list markers with the li, and re-style the text within using span?

li {
properties of the numbers
}

li span {
properties of the text
}

<ol>
<li><span>list item</span></li>
<li><span>list item</span></li>
<ol>

I dunno if it'll work, but it's an idea...

Graft-Creative

03-08-2005, 11:15 PM

Thanks guys. I'm afraid you've confirmed my worst fears about this (not that I'll have nightmares about it).

;)

But it's a shame the only options seem to be some kind of tag fudge

Many thanks,

Gary

Bobbo171

03-08-2005, 11:55 PM

you can check this out...it may be what your looking for
http://www.alistapart.com/articles/taminglists/

tammyhart

04-12-2006, 03:27 PM

orcrist

04-12-2006, 03:42 PM

ah lol, resurection !! :D

i did something like that using :first-letter pseudo element, take a look:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title></title>

<style type="text/css">
#services ul{list-style-type:none;padding:0;margin:0px 10px;}

.list a {text-decoration:none;display:block;letter-spacing:-1px;
color:#000;}
.list a:hover {color:#666;
text-align:center;}
#list1 li :first-letter {color: #ccc;display:block;
font-weight:bold;
margin:0.2em;background-color:#b00;}

#list2 li :first-letter {color: #ccc;display:block;
font-weight:bold;
margin:0.2em;background-color:#b00;}

#list1 {float:left;}
#list2 {float:right;}
</style>
</head>
<body>
<div id="services">
<ul id="list1" class="list">
<li><a href="#">» Windscreens</a></li>
<li><a href="#">» Side Glass</a></li>
<li><a href="#">» Rear Glass</a></li>
<li><a href="#">» Resealing</a></li>
<li><a href="#">» Chip & Crack Repairs </a></li>

</ul>
</div>
</body>
</html>

translated: it reduced markup for that span thing, no need for that ;)