Jump to content

Confusing Css Problem


Recommended Posts

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:


color: #FFFFFF;
text-decoration: none;
a:hover {
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 {
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:


color: #FFFFFF;
text-decoration: none;
a.menu:hover {
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>



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!!!!




Link to comment
Share on other sites

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 :notworthy:



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

Edited by OJB
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...