Wondered if anyone less amateur of a site coder than me could help, I'm doing a site that's going to involve a few ordered lists on pages, & on the ordered lists I'd like the actual numbers on the lists to be a separate font & colour from the actual list content, but can't work out a way to do it, if it's possible at all.

Looking for css list styles brings up everything about different styles of numbering lists as far as roman/greek/armenian ( :confused: ) numbering, but no actual content on how to style the look of things.

I suppose I could do it with un-ordered lists, with coloured bullet points but that's cheating.

http://www.tizag.com/cssT/list.php

has just what your looking for I think..

as for styling the look of things, that depends on the rest of the CSS, your div background, font colour/size etc, which is often defined else where and/or a combo of everything..

I use http://www.w3schools.com/css/css_list.asp for reference too :) - should have alot more info for you..

Nah unfortunately, the w3schools page is what I was mainly referring to, & the other link just re-iterates what w3schools (& the other sites I've looked at) say. I just want to change the font-family & text colour for the numbers on the ordered lists without changing the actual list content.

Site's (being developed) here (http://dev.mixmonkeys.com/), in the top post is the example tracklist, I just want to change the styling on the 1/2/3/4/etc bit without changing the styling of the rest of the list. Not a killer if I can't, but I've been obsessing over the rest of the site all day & that'd be a nice touch.

If you have a look only use Firefox/Opera/Chrome/Safari for the moment, fixing it all up for ie6/7/8 is coming next.

Ah just got it sorted, ended up with...


.postcontent ol li {list-style:decimal;font-family:'minyanouvelle';color:#1b0036;}
.postcontent li p {font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;color:#fff;line-height:0.4em;}


and instead of...


<ol><li>Peverelist: The Grid</li>
<li>Ike Release: Jenova</li>
<li>2562: Channel Two</li>
<li>Scuba: Negative</li></ol>


...using...


<ol><li><p>Peverelist: The Grid</p></li>
<li><p>Ike Release: Jenova</p></li>
<li><p>2562: Channel Two</p></li>
<li><p>Scuba: Negative</p></li></ol>


Bit of a cludge but it works.

What steev said. Unfortunately you sometimes have to hack them. Personally I'd use a span rather than a p as it's not technically a paragraph.

Funny you should mention that, it's what someone else mentioned in the next reply, I just tried the first one I saw. I've done it now, & writing <p></p> a load of times is quicker than writing <span></span> & takes less code so nads to it, it's staying. I've hacked the line-height in the css so it looks better with it being separate paragraphs.