Confusing Css Problem

[OJB]

Hey guys

 

I am currently building a site in PHP/MySQL and I am skinning the site in CSS.

 

I have a menu at the top of my page which has a darkish gradient background, so I have the following CSS code to control the links in it:

 

>a{
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color:#FFFFFF;
text-decoration: underline;
}

 

pretty simple...

 

Now, The main background of my site is actually white, which means links within the main block will of course not be visible.

 

So I created the following CSS code for the links:

 

>a .tablelink{
color: #000000;
text-decoration: none;
}

a.tablelink:hover {
color:#000000;
text-decoration: underline;
}

 

i.e. black instead of white.

 

Then in my PHP code for the links to be in the body (in a table) I have this:

 

>echo "<td width = \"12%\" align = center><a class=\"tablelink\" href=\"editusers.php?ID=".$stickerdetails[$x]['UserID']. "\">".$stickerdetails[$x]['UserID']."</td>";

 

Now the problem that I am having is that on hover the link is fine, it is black and underlined as it should be... But when not hovering over the link it seems to be taking the other CSS anchor class, in other words the font is white and not visible against a white background.

 

I thought that a way around it may be to create a separate CSS anchor class for my menu items and leave my table links to use the regular anchor class, but when I do that the menu wrecks my gradient background of the page...

 

I have attached three images...

 

One shows the result of the table when there is no mouse over one of the links in the table (i.e. the user ID column appears blank)

 

One shows when hovering over one of the links it shows up black and underlined

 

The final image shows what happens if I change my CSS to:

 

>a.menu{
color: #FFFFFF;
text-decoration: none;
}
a.menu:hover {
color:#FFFFFF;
text-decoration: underline;
}

 

for the menu CSS and hence my HTML changes to:

 

><div class="menu">
<span><a class="menu" href="users.php">Edit User</a></span>
<span><a class="menu" href="merge.php">Merge Accounts</a></span>
<span><a class="menu" href="findsticker.php">Find Sticker Code</a></span>
</div>

 

 

As you should be able to see there is a blue rectangle around the menu item and hence it disrupts the look of my gradient background

 

Any help would be much appreciated!!!!

[TCH-Bruce]

Don't know if it was a typo but you have above:

>a .tablelink{
color: #000000;
text-decoration: none;
}

 

Note the space between the a and .tablelink

[OJB]

I was just about to write back saying "no there is no space"

 

but then I hit delete just in case and there was one... For some reason when writing in Notepad++ the spaces are really small and I couldn't see it!!!

 

 

HAHAHAH I feel thick now!!!

 

All is working and I am no longer bleeding at the knuckles for punching the screen

 

 

Thanks alot Bruce, much appreciated. I guess it often takes someone elses eye to spot little mistakes like that

Edited November 26, 2007 by OJB

[TCH-Bruce]

Glad I could help.