CSS Problem – Can’t style the appearance of Categories listing in the sidebar

Hey everyone,

I’m having unexpected trouble styling the appearance of my Categories display in the sidebar and I was wondering if someone could help me.

I am using WordPress version 2.6.1 and I am using a self-customized version of the deMar theme.

Here is my blog: Click This

The deMar theme comes with the appearance of the Categories pre-styled (code included in this post – scroll down to see it) in the stylesheet.

I LIKE the way that the links display – what with the boxes and color changing and all – but I DON’T LIKE how the Categories listings have no markers and have the post counts displaying one line below the Category listing.

I WOULD LIKE my Categories listing to be displayed with a disc (or some sort of marker) marking each category listing and for the post count to be listed right after the Category name with a space separating the listing name from the post count.

I can get the list-style-type to work just fine for general sitewide unordered lists (provided there are no CSS overrides of course), but not when editing the styling for the way my Categories are displayed in my sidebar.

If you look at my blog, you can see what I mean. The ul styling works on my posts, but not with my sidebar and/or Categories listing.

I’ve been poking at this thing for the last hour and am starting to get myself really confused, so if someone could point out where exactly to change the code/insert new code to make the Categories display how I would like them to, I’d be really grateful.

Again, the Theme I am working from (deMar) does include styled Categories already. I assume that I would have to change -something- in the way that it’s already been styled, but I don’t know what.

I’m including some coding in this post; if I need to include more, please let me know and I’ll do so.

Here’s the coding from the stylesheet.css that shows how the sidebar is styled:

Note: The list-style-type coding is what -I- inserted to try and make the Categories display with the marker, not the original theme author. Everything else is the original coding.

.box-right {
	margin: 0 0 40px 0;
	clear: both;
}

.box-right ul {
	margin: 0px;
	padding: 0px;
        list-style-type: disc;
}

.box-right li {
	display: inline; /* white space bug IE6 */
}

li.cat-item ul.children {
	margin: 0px;
	padding: 0px;
	list-style-type: disc;
}

li.cat-item ul.children li {
	margin: 0px;
	padding: 0px;
}

.box-right li a {
	display: block;
	margin: 0px;
	padding: 5px;
	border-bottom: 1px dotted #ddd;
	text-decoration: none;
}

li.cat-item ul.children li a {
	padding: 5px 5px 5px 20px;
}

li.cat-item ul.children li ul.children li a {
	padding: 5px 5px 5px 40px;
}

.box-right li a:hover {
	background: #f7f7f7;
}

.box-right .page_item a, .box-right .current_page_item a {
	background: transparent;
	width: auto;
	height: auto;
	color: #6D562C;
	font-weight: normal;
	text-align: inherit;
}

Here is the coding from the sidebar.php that codes for the Categories to appear:

<div class="box-right">

			<h4>Categories</h4>

<ul>
				<?php wp_list_categories('title_li='); ?>
			</ul>
</div>

Do I need to include anything else to help someone/anyone help me?

Let me know.

Please and thank you!