I'm trying to use a custom image for bullets to be displayed in the content of a "page." I have the class defined in the stylesheet and the HTML is all correct. In fact the bullets appear, but they appear next to the default bullets which I cannot get rid of.
I'm thinking it's a problem where a more dominant
<br />
<table id="lists"><br />
<tr><br />
<td><br />
<ul class="linklists"><br />
<li class="bulleted"><a href="http://www.truckerstoystore.net">Truckers Toy Store</a>
<li class="bulleted">The Infamy
<li class="bulleted">I Eads Bored Productions
<li class="bulleted">Onslow Rehabilitation Center
</td>
<td width="35"> </td>
<td>
<ul class="linklists">
<li class="bulleted">Susan Schmidt
<li class="bulleted">Carolina Green Landscaping
<li class="bulleted">The Infamy (old site)
<li class="bulleted">Booking Agency Site - <span style="color: #ff0000">FOR SALE!!</span>
</td>
</tr>
</table>
and CSS
<br />
#lists {<br />
border: 1px dashed #666;<br />
padding: 8px;<br />
}</p>
<p>#lists li {<br />
line-height: 17px;<br />
}<br />
#lists li.bulleted {<br />
list-style-image: url('images/bullet.gif');<br />
}</p>
<p>table, tr, td {<br />
padding: 0;<br />
margin: 0;<br />
list-style: none;<br />
}</p>
<p>.linklists { margin: 4px 0px 0px 20px; padding: 10px; }<br />
The site is located at http://www.iebwebdesign.com/wordpress
Your help is very much appreciated.
Thanks,
Cameron