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

krembo99 · #1 Mar 23rd, 2008, 06:40

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 · #2 Mar 23rd, 2008, 07:46

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 · #3 Mar 23rd, 2008, 09:59

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 · #4 Mar 23rd, 2008, 10:45

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Wordpress installation problem	marSoul	Website Planning	7	Jan 15th, 2008 09:24
[SOLVED] Validate Form Class	soloam	JavaScript Forum	2	Nov 28th, 2007 14:51
[SOLVED] div class and div id	danny322	Web Page Design	1	Nov 22nd, 2007 12:52
[SOLVED] Wordpress	Phixon	Web Page Design	4	Oct 30th, 2007 13:27
[SOLVED] Web design class	thewebkid	Starting Out	1	Oct 27th, 2007 04:32

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] beginner's problem .. [wordpress template] One class ignored out of two