Confusion over basic ul and li styling 1

[followtheboat]

Good afternoon,

I'm struggling to style some basic unordered lists. Here is the code:

CSS CODE

#sidebar {width:260px;margin-left:12px;float:left;	text-align: left; }
#sidebar li {list-style: none;}
.side-cat {float:left;width:250px;margin-bottom: 10px;	margin-top: 20px;background:url(images/notepad.gif) no-repeat center top}
.side-cat ul li {list-style-position: inside;list-style-type: disc;}

HTML CODE

<div id="sidebar">
  <div class="side-cat">
  	<ul><li><?php wp_list_categories('sort_column=name&optioncount=1&hierarchical=0&title_li=&show_count=1&style=list'); ?>
        </li></ul>
  </div>
</div>

I'm trying to strip all list elements within the parent sidebar div, hence the sidebar ul li list style none, and then treat each list separately.

Right now the above code has stripped out the list element. However in the above example the side-cat list displays a list but it doesn't display my disc list style, either inside or out.

Any clues? It's the one area of my site that is causing me frustration!

 

[Vragabond]

Specificity:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

In short, your #sidebar li declaration is more specific (has higher specificity) than your .side-cat ul li declaration, so list-style: none; is at the top of the importance list. The link will explain more and you will be able to find a solution that works best for you.

Do something about world cancer today: Comprehensive cancer control information at PACT

 

[followtheboat]

Thanks, V. This is the second time I've seen a link to this website in the last 48 hours. Obviously worth checking out. My problem is that even if I strip out the sidebar style I still can't get the child list to work, but I'll have a play after reading the article. Thanks once again.

 

[followtheboat]

Hello again, V. I've just read Andy Clarke's fantastic article on specificity and I feel like I've just seen the light! Am I showing my ignorance if I admit I wasn't aware of these levels of specificity? Thanks once agian.

 

[Vragabond]

You're not, because for the longest time, CSS was used for very simple class and sometimes id declarations. With those, you hardly ever deal with specificity issues. When you begin to use dependency selectors and have overlapping styles for same elements, the specificity comes into play. And so for the most part, specificity issues are avoided and only the 'what comes later in the code takes preference' rule is observed.

Do something about world cancer today: Comprehensive cancer control information at PACT