CSS list-style: none; still shows bullet

css

Solution

I think that Dan was close with his answer, but this isn't an issue of specificity. You can set the list-style on the list (the UL) but you can also override that list-style for individual list items (the LIs).

You are telling the browser to not use bullets on the list, but YUI tells the browser to use them on individual list items (YUI wins):

ul li{ list-style: disc outside; } /* in YUI base.css */

#nav ul.links {
    list-style: none; /* doesn't override styles for LIs, just the UL */
}

What you want is to tell the browser not to use them on the list items:

ul li{ list-style: disc outside; } /* in YUI base.css */

#nav ul.links li {
    list-style: none;
}

Problem

I am using YUI reset/base, after the reset it sets the `ul` and `li` tags to list-style: disc outside; My markup looks like this: ``` <div id="nav"> <ul class="links"> <li><a href="">Testing</a></li> </ul> </div> ``` My CSS is: ``` #nav {} #nav ul li { list-style: none; } ``` Now that makes the small disc beside each li disappear. Why doesn't this work though? ``` #nav {} #nav ul.links { list-style: none; } ``` It works if I remove the link to the base.css file, why?. Updated: `sidenav` -> `nav`

Original source