problem with using <ol> with in <ul> in html and using css to change the result

For some reason that im not sure the that is inside the about christopher paolini's books displays using bullet points instead of the lower-roman numerals. does anyone know whats wrong?

Html

<ol class="list">
    <li>Books

      <ul class="list">
        <li>Any thing by Mathew Riely</li>

        <li&g开发者_开发百科t;Alex Rider series</li>

        <li>Christopher Paolini

          <ol class="list">
            <li>Eragon</li>

            <li>Eldest</li>

            <li>Brisingr</li>
          </ol>
        </li>
      </ul>
    </li>

    <li>Music

      <ul class="list">
        <li>Muse</li>

        <li>Coldplay</li>

        <li>Red</li>

        <li>Radiohead</li>
      </ul>
    </li>

    <li>Films &amp; TV

      <ul class="list">
        <li>Inception</li>

        <li>Serenity</li>

        <li>Star Trek</li>

        <li>Surrogates</li>
      </ul>
    </li>
  </ol>

css

ul.list {
  list-style-image : url('images/bpr.png');
}

ol.list {
  list-style-type : lower-roman;
}

This code seems to be working just fine for me. Are you sure that your CSS is being imported?

This works in safari's code snippet editor.

<style>
ul.list {
  list-style-image : url('images/bpr.png');
}

ol.list {
  list-style-type : lower-roman;
}
</style>

<ol class="list">
    <li>Books

      <ul class="list">
        <li>Any thing by Mathew Riely</li>

        <li>Alex Rider series</li>

        <li>Christopher Paolini

          <ol class="list">
            <li>Eragon</li>

            <li>Eldest</li>

            <li>Brisingr</li>
          </ol>
        </li>
      </ul>
    </li>

    <li>Music

      <ul class="list">
        <li>Muse</li>

        <li>Coldplay</li>

        <li>Red</li>

        <li>Radiohead</li>
      </ul>
    </li>

    <li>Films &amp; TV

      <ul class="list">
        <li>Inception</li>

        <li>Serenity</li>

        <li>Star Trek</li>

        <li>Surrogates</li>
      </ul>
    </li>
  </ol>

You can do something like this:

ul.list { 
    list-style-type: none; 
}
ul.list li { 
    background : url('images/bpr.png') top left no-repeat transparent;
    padding-left: 10px; 
}
ol.list { 
    list-style-type : lower-roman; 
}

This will give you the image for the normal li items and a roman count for the ol list items.

I use this method:

<ol id="list">
<li>Books
  <ul>
    <li>Any thing by Mathew Riely</li>
    <li>Alex Rider series</li>
    <li>Christopher Paolini
      <ol>
        <li>Eragon</li>
        <li>Eldest</li>
        <li>Brisingr</li>
      </ol>
    </li>
  </ul>
</li>
<li>Music
  <ul>
    <li>Muse</li>
    <li>Coldplay</li>
    <li>Red</li>
    <li>Radiohead</li>
  </ul>
</li>
<li>Films &amp; TV
  <ul>
    <li>Inception</li>
    <li>Serenity</li>
    <li>Star Trek</li>
    <li>Surrogates</li>
  </ul>
</li>
</ol>

with the CSS as:

#list li
{
    list-style: lower-roman;
}

#list li li
{
    list-style: url('images/bpr.png');
}

#list li li li
{
    list-style: lower-roman;
}