CSS changing the colour of the list style

Question

hello this might be a simple fix. so i have a few <ul> each with 15+ <li>..

some of my html.

<ul>
  <li><span>Government Gazette, No. 32320 of 12 June 2009. Forestry Sector Charter. s.l.:s.n.</span></li>
  <li><span>Government Gazette, No. 34267 of 10 May 2011. Charted Accountancy Sector Charter. s.l.:s.n.</li>
  <li><span>Government Gazette, No. 35400 of 1 June 2012. Property Sector Charter. s.l.:s.n.</li>
  <li><span>Government Gazette, No. 35423 of 06 June 2012. Information Technology and Telecommunication Sector Charter. s.l.:s.n.</span></li>
  <li><span>Government Gazette, No. 35754 of 5 October 2012. Revised Broad-Based Black Economic Empowerment Codes of Good Practice and B-BBEE Technical Assitance Guideline. s.l.:s.n.</span></li>
  <li><span>Government Gazette, No. 35907 of 23 November 2012. Broad-Based Black Economic Empowerment Amendment Bill. s.l.:s.n.</li>
  <li><span>Government Gazette, No. 35914 of 26 November 2012. Financial Services Sector Charter. s.l.:s.n.</span></li>
  <li><span>Government Gazette, No. 53 of 2003. Broad-Based Black Economic Empowerment Act. s.l.:s.n.</span></li>      
</ul>

i had to shorten it.

my css:

 #bee_wwwh_box ul{
list-style-type:upper-roman;
margin-bottom: 10px;
margin-top: 15px;
margin-left: 30px;
margin-right: 450px;
 }
 #wwwh_box li{
font-size: 18px;
    color: #16a6b6;
letter-spacing: 1px;
margin-bottom: 10px;
margin-top: 15px;
margin-left: 30px;
margin-right: 30px;
 }
 #wwwh_box li span {
color: #41413e;
 }

so as you can see i have wrapped all my text in <span> and then tried to change the colour of just the Roman symbols so that people can see distinctly where there is a list of items. only its changing the whole list text?? i cant make heads or tails of it?

am i doing something wrong?

Try reading here for a nice long explanation: http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/ — Andy, Jan 30 '13 at 16:01
thanks to all that helped me find the issue i am sorry that it was so obvious — legendary_rob, Jan 30 '13 at 16:13

score 2 · Answer 1 · answered Jan 30 '13 at 16:07

It works, you are missing some closing <span> tags

HTML:

<div id="wwwh_box">
    <ul>
        <li><span>Government Gazette, No. 32320 of 12 June 2009. Forestry Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 34267 of 10 May 2011. Charted Accountancy Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35400 of 1 June 2012. Property Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35423 of 06 June 2012. Information Technology and Telecommunication Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35754 of 5 October 2012. Revised Broad-Based Black Economic Empowerment Codes of Good Practice and B-BBEE Technical Assitance Guideline. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35907 of 23 November 2012. Broad-Based Black Economic Empowerment Amendment Bill. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35914 of 26 November 2012. Financial Services Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 53 of 2003. Broad-Based Black Economic Empowerment Act. s.l.:s.n.</span></li>
    </ul>
</div>

CSS:

#bee_wwwh_box ul {

    margin-bottom: 10px;
    margin-top: 15px;
    margin-left: 30px;
    margin-right: 450px;
}
#wwwh_box li {
    list-style-type:upper-roman;
    font-size: 18px;
    color: #16a6b6;
    letter-spacing: 1px;
    margin-bottom: 10px;
    margin-top: 15px;
    margin-left: 30px;
    margin-right: 30px;
}
#wwwh_box li span {
    color: #41413e;
}

http://jsfiddle.net/xaKsU/

thats true thanks for spotting that i just saw now in your example i did a bit of regex to find and replace all but seems like that didnt work! high five — legendary_rob, Jan 30 '13 at 16:10
i changed the css a bit too, copy my css and html, your html doesn't have a the wrapping `div` with the id of `#wwwh_box` — keeg, Jan 30 '13 at 16:12

score 1 · Accepted Answer · answered Jan 30 '13 at 16:03

1

You have no closure </span> on some of the elements. You have opened them and didn't close them. It might be a problem ...

answered Jan 30 '13 at 16:03

Панайот Толев

6,597
5
19
28

yeah i know what you mean but i use sublime so what i did is replace all `
` with `
` and all `

legendary_rob

Jan 30 '13 at 16:07

score 1 · Answer 3 · answered Jan 30 '13 at 16:05

1

I think its because some of your SPAN tags have not been closed? You have opening tags for them but no closing tags for some.

answered Jan 30 '13 at 16:05

Zeddy

2,079
1
15
23

score 1 · Answer 4 · edited May 23 '17 at 11:56

First off, your <span> tags are not closed.

If this does not fix your problem, there are some other methods you might try. One option is to use an image in place of a list bullet (see 'list-item-image'):

li { list-style-image: url(images/yourimage.jpg); }

Another possibility is to use a li:before selector, though this will not work with old versions of IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    li {
      list-style: none;
    }

    li:before {
      /* For a round bullet */
      content:'\2022';
      /* For a square bullet */
      /*content:'\25A0';*/
      display: block;
      position: relative;
      max-width: 0px;
      max-height: 0px;
      left: -10px;
      top: -0px;
      color: green;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>
</html>

See this question for more information about both methods.

CSS changing the colour of the list style

4 Answers4