cant remove the circle thing in list

I have these lines on my css:

.catBox ul{
    list-style-type: none;
    padding-left: 0px;
}

Code (markup):

And i have these lines on my html:

	<div class="catBox">
	<div class="catLeft">Com Coupons<ul>
									
			<li><span class="code">YES3</span>30% off .com domain names</li>
									
			<li><span class="code">QUEEN3</span>30% off .COMs and Renewals</li>
</ul>
</div>
</div>

Code (markup):

But the dot in front of the list item still shows up.



What did I do wrong?
Thanks.

 

The ul is a decendent of catLeft, not catBox, so do .catBox .catLeft ul

 

Thank you for you reply.

However, it still doesn't work.

.catBox .catLeft ul{
list-style-type: none;
padding-left: 0px;
}
The dot thing is still there.

 

You didn't mention in which browser(s) this happened; it's always a good idea to do so.

Try this:

.catBox ul{
    list-style: none;   /*note the property token*/
    padding-left: 0;
    margin-left: 0;   /*IE8 and Opera10 now use padding for the indent.  Older versions used margin, 
                        so be sure to zero it too.*/
}

Code (markup):

cheers,

gary

 

Sorry. my bad.

It has this issue in both FF and IE.

 

Solution tested, and works.

cheers,

gary

 

Here's the code to remove the annoying bullet list

.catBox .catLeft ul li{list-style: none;}

list-style is different from list-style-type