[SOLVED] beginner's problem .. [wordpress template] One class ignored out of two

[krembo99]

Hello people.
I am having a problem which drives me crazy.
I am making my third wordpress template now, the simplest EVER. but somehow, this simple one is the one who is giving me the hardest time.
I am using only two classes on this page . "item" and " categor" , all the otehr classes are for the header part of the document (which has only one other and is very simple)
The problem is , somehow the "categor" class is being ignored and gets the browser's default. no matter what i do. it is obviously a hirerchy problem of nested something , but what ?
(Sorry I do not have a URL, it is being developed on Local machine)

this is the PHP (or html)

Code: Select all

<link href="style.css" rel="stylesheet" type="text/css" />
<p><table width="100%" align="center" >
<tr>
<td width="58%" align="left"><a class="item" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></td>
<td width="42%" align="left" ><a class="categor"><?php the_category(', ') ?></a></td>
</tr>
</table></p>

and this is the CSS

Code: Select all

body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
vertical-align: top;
}



.blogname {

font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}

p.blogname {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
color: #999999;
text-decoration: none;
}

p.blogname:hover {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}

.blogname:visited {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
background-color: #FF0000;
}

.blogname:hover{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
background-color: #666666;
}

.item {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
color: #FFFFFF;
text-decoration:none}

.item:link{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
color: #FFFFFF;
text-decoration:none}


.item:visited {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
color: #FFFFFF;
text-decoration: line-through;
}

.item:hover {

font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
background-color: #FF0000;
}

.categor {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
text-decoration:line-through;
}

.categor:hover {

font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}

.categor:visited {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: line-through;
}

[Jack Franklin]

Code: Select all

<td width="42%" align="left" ><a class="categor"><?php the_category(', ') ?></a></td>

Try giving the td the class? Then use

Code: Select all

.categor a:link {
...
}

.categor a:visited {
...
}

.categor a:hover {
...
}

.categor a:active {
...
}

Or am I getting the wrong end of the stick?

[krembo99]

Dude !!....
I don't know which side of the stick you got, but IT WORKED !!

I changed

Code: Select all

<td width="42%" align="left" ><a class="categor" ><?php the_category(', ') ?></a></td>

to

Code: Select all

<td width="42%" align="left" class="categor" ><a ><?php the_category(', ') ?></a></td>

I can't belive that I did not saw that myself.
I still do not understand why in such a simple layout and css, One class is inside the "a" tag, and the other needs to be inside the "td" tag.
They are practically identical tags, why can't they both be inside the "a" ?

Thanks a lot again ...
and if you know the answer to why it occured , I would sure like to know .

[Jack Franklin]

I have no idea myself, but I'm sure others here will be able to give a better explanation.

EDIT: I might know why,

You see for the class 'item' you use :link, :hover, etc.
On the class 'categor' you didn't. When assigning things for links, you need to do it in the order:
link
visited
hover
active
Or CSS Gets stressy. Easy way to remember:
L
o
V
e
H
A
t
e