Topic: problem with ordered list

In my CSS I have a div defined like so:

    #comment_container .scroller ol li{
        list-style-type: decimal;
        color: #993;

When I call it in html, the color changes but the list-style doesn't show up (no numbers, decimals, anything).  Anybody have an idea what could cause that? I tried commenting out previous instances of list-style in my css to see if something was overwriting it but if that's happening I can't find it. 

Any help appreciated..

Re: problem with ordered list


#comment_container.scroller ol li{

You shouldn't have a space between you div name and your class name.

Re: problem with ordered list

No it definitely needs the space (it didn't work without it).  Like I said, other things that are set work.. like when I change the color of the text it reflects that on the page, but when I set the list-style-type nothing happens..

Re: problem with ordered list

have you got a sample of the html so I can have a play with it?

Re: problem with ordered list

Are you sure the <li>'s are displaying as list-items? For example, if you've set the list-items' display property to inline, it may ignore the list-style-type decleration because it's no longer considered a list-item. Try explicitly setting the <li> display property to list-item and see what happens.

Here's Microsoft's take on it, you may also find Mozilla's annotated specs useful.

Hope that helps!

Last edited by chap (2007-07-31 22:07:43)

Re: problem with ordered list

Ok, I found the culprit but i can't seem to figure out how to work around it.  I have a reset at the top of my stylesheet that zero's out everything.  The line of code that's causing the problem is:

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {
    padding:0; }

If I remove the ul, ol, li from that I get my bullets and decimals but the rest of the site goes haywire (it's required for other ul, li, ol elements..)

So, how can I reset the defaults just for one div?  I tried adding padding and margin to that div specifically, and while it does create padding and margin, it won't display the bullets.

    #comment_container .scroller ol li{
        list-style-type: decimal;
        margin-left: 5px;
        padding: 5px;
        color: #888;}

[edit]: Setting the margin-left to 25px solved it.  Thanks everyone!

Last edited by viniosity (2007-08-01 12:24:11)

Re: problem with ordered list

Dude, use a universal to remove the padding and margin from every element.

* {
padding: 0;
margin: 0;