[RESOLVED] Overriding list styles

Here’s the target list:

[code]
<ul class=”docList”>
<li><a name=”9″></a><strong>TypeA</strong>
<ul>
<li>
<p class=”header”><a href=”../status/showDocument_e.cfm?id=752″>Link here</a> (2005)</p>
<p class=”description”>Short description…</p>
</li>
</ul>
</li>
</ul>
[/code]

I have the following line for all the <li> on the site. The target list also gets styled with the following style:

[code]
li{list-style-image: url(‘images/layout/arrow2.gif’); list-style-position: outside;}
[/code]

I’m trying to override the style of the target list by doing the following:

[code]
ul.docList li, ul.docList ul li{list-style-type: none !important;}
[/code]

The only way I can get any changes to appear is by overriding the image on the global li style:

[code]
ul.docList li, ul.docList ul li{list-style-image: url(‘images/layout/othergraphic.gif’); list-style-position:
[/code]

[B]I just clued in![/B]

[code]
ul.docList li, ul.docList ul li{list-style-image: none;}
[/code]

This works for me. Lesson of the day, if you set “list-style-image” to something, you’ll have to set it to “none” to get rid of it… Problem solved!

:rolleyes:

Also in #CSS _↴