wp_list_categories ignoring ul styles?

I’m having trouble getting my categories to list horizontally like so many people. I’m able to get it to work without a hitch with the pages, but things just wont go the way I want them to with categories.

First my CSS:

.categories {
	border-top-color: #f0f0f0;
	border-bottom-color: #f0f0f0;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-top-style: solid;
	border-top-width: 1px;
	font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	width: 100%;
	clear: both;
	background-color: #f8f8f8;
	padding-top: 1px;
	padding-bottom: 1px;
}

#catlist ul {
	white-space: nowrap;
}

#catlist li {
	display: inline;
	list-style-type: none;
}

#catlist a {
	border-spacing: 0px 0px;	padding: 10px;
}

#catlist a:link, #catlist a:visited {
	color: #9f9f9f;
	text-decoration: none;
}

#catlist a:hover {
	border-bottom-style: none;
	border-top-style: none;
	border-spacing: 0px 0px;
	color: maroon;
	text-decoration: none;
	padding-top: 13px;
	padding-bottom: 13px;
}

Here’s the code I’m trying to work it with:

<div class="categories">
        <ul id="catlist">
        <?php wp_list_categories('title_li='); ?>
        </ul>
    </div>

I expected that to do it, but for some reason they still display themselves in a list almost as though they’re ignoring CSS I’m trying to apply to them.

As a test, I put the categories in manually to see if they displayed correctly like this:

<div class="categories">
        <ul id="catlist">
        <li><a href="#">Local Stories</a></li>
        <li><a href="#">The Business Community</a></li>
        <li><a href="#">The Non-Profit World</a></li>
        <li><a href="#">Reviews</a></li>
        <li><a href="#">Opinions</a></li>
        <?php wp_list_categories('title_li='); ?>
        </ul>
    </div>

And they displayed fine, with the categories being called from the system displaying vertically instead of horizontally.

Just for fun I tried putting the wp_list_categories with my working pages thinking maybe I messed up the CSS for the cat somewhere:

<div class="pages">
            <ul id="pagelist">
            <li><a href="/">Home</a></li>
			<?php wp_list_pages('title_li='); ?>
			<?php wp_list_categories('title_li='); ?>
            </ul>
        </div>

The pages were displayed horizontally just like I wanted them to be, however the categories were vertical.

Getting desperate, I tried putting the pages inside the ul for the categories to see if they displayed horizontally.

<div class="categories">
        <ul id="catlist">
        <li><a href="#">Local Stories</a></li>
        <li><a href="#">The Business Community</a></li>
        <li><a href="#">The Non-Profit World</a></li>
        <li><a href="#">Reviews</a></li>
        <li><a href="#">Opinions</a></li>
        <?php wp_list_categories('title_li='); ?>
        <?php wp_list_pages('title_li='); ?>
        </ul>
    </div>

Sure enough they did. Which leads me to believe that there is something different about the wp_list_categories that is causing this to happen.

Is there something in the wp_list_categories command that is causing it to ignore the CSS?

I tried looking around in the forums for help first and found people with similar issues, but people didn’t seem to show their code making it impossible for anyone to help them, or they seemed to figure it out before anyone was able to try.

I’m certain there is something really simple that I’m missing for the usage for wp_list_categories that could solve this real quick, but I’m just not finding it.

Any help that anyone can offer would be greatly appreciated.