div links not picking up multiple word class description

Hi all, my first post here.

I have a div whose background image changes according to my Wordpress categories:


div.cat-links a.cat-log {
background-position: 20px 5px;
}

div.cat-links a.cat-a day in the life {
background-position: -163px 5px;
}


The code for the image is being reproduced here:


<div class="cat-links">
<?php foreach((get_the_category()) as $category) {
echo '<a rel="category-tag" href="'.get_category_link($category->cat_ID).'" class="cat-'.$category->cat_name.'">'.$category->cat_name.'</a>';
} ?>
</div>


In my example above it works for the first category, 'log', because it is a single word category. It doesn't work, however, for my category 'a day in the life'. For some reason this code is drawing the category name from the Wordpress name, not the slug. The slug, in this case, is 'adayinthelife'. I have tried:


a.cat-a day in the life
a.cat-'a day in the life'
a.cat-adayinthelife
a.cat-a_day_in_the_life


...none of which work. I am trying to emulate the code from OMGUbuntu (http://www.omgubuntu.co.uk) where little grey category icons appear by the excerpt on the home page.

Wordpress is pretty well documented and has an active community. A quick search brought this up for me: http://wordpress.org/support/topic/how-to-display-the-category-slug-and-not-the-category-name

Hi Stephan and thanks for your reply.

I didn't post or look for this in the Wordpress forum as I'm not convinced this is a Wordpress issue. This is a CSS problem where I am trying to call a category name that has more than one word. The fact it is Wordpress is incidental. Indeed the code that calls the Wordpress category is correct; it is the CSS code that need adjusting.

Can anyone else offer any pointers?

[EDIT]
Oh, hold on a minute, I think I understand the principle of applying this. I'll give it a go and get back to you...

I'm afraid the links you provide assume that that user is already within a category-specific page.

Any alternative suggestions?

I know nothing of Wordpress but css class names cannot contain spaces (or apostrophes). They must start with a letter, then letters, numbers, hyphens or underscores.

So 'cat-log' is one class and, within the css declarations, each class name needs to be preceded by a . dot.

I know nothing of Wordpress but css class names cannot contain spaces (or apostrophes).

As a matter of fact, the class attribute value can contain spaces but in this case each string separated by a space is an own class. So, if the category name is written like “a day in the life” as value of a class attribute it would actually be possible to call the element with either:

.a {…}
.day {…}
.in {…}
.the {…}
.life {…}

… or any combination of these like .day.the {…} or .a.day.in.the.life {…}.

But anyway, this doesn’t look like a proper way to do it, the best would actually be to output the slug rather than the name.

Hi again, Stephan,

I keep going back to your original suggestion re calling the slug, but I'll be honest: I don't know php well enough to work it out myself, hence this posting. I think the 'get_query_var' is what I'm needing but I can't find an example of how to use it correctly.