Question

I applied a list-style-type to an unordered list that is an image. As you can see below, my unordered list has an additional unordered list in it.

I would like for the nested unordered list to have a ‘circle’ list-style-type, that is why I used an inline style for the nested unordered list.

The problem I am having is it is still displaying the green-checkmark for the list-style in the nested list, instead of the circle list-style.

So far, every time I used inline css it overrode any external style rules, that is why I am not sure what I should do in this case, I appreciate any advice.

css

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

Markup

<ul>
    <li>hello</li>
    <li>animals
         <ul style="list-style-type:circle;">
           <li>cats</li>
           <li>dogs</li>
           <li>rats</li>
            <li>hogs</li>
            <li>snakes</li>
            <li>frogs</li>
        </ul>
    </li>
    <li>onions</li>
</ul>

Answer 1

Try <ul style="list-style-type:circle; list-style-image: none;">.

The two properties are different. If you have set any list-style-image it overrides list-style-type, the latter only being used if the image is not available (as a back-up). So to force the image to not be used, it needs to be explicitly told to not use the image in this case.

You should actually be able to set it up like so:

ul{
  list-style-image:url(images/green-checkmark.png);
  list-style-type:circle; /* back-up */
}

Then if doing inline: <ul style="list-style-image: none;">