Please help me fix these th styling LINKS in table Updated question)

Hello all,

This is an update to the below recently answered question:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_26913465.html

After I closed the above question I found additional issues that need to be fixed.

Here's the page:
http://hypermastery.com/suggestions-test

I tried fixing the issue myself.  In the process I decided to delete the css solution offered in the above question and revised my css per the below snippet.  (I deleted it because I think it affected all th's in the  table class="adminlist", and I only wanted it to affect the top row.  Now I am not sure my deleting that was a good approach???)

The problem is the top titles now stay white, which is what I want.  However the various links under the TITLE when hovered, also become white.(Example: "Music for Harmonicas"). They need to be black text under all link states.

How can I fix this?

Thanks

Rowby


th.gridsortx a, a:hover, a:focus {
	color: #FFF;	
	
}

th.suggvotesx a, a:hover, a:focus {
	color: #FFF;

}

th.suggcommentsx a, a:hover, a:focus {
	color: #FFF;	

}

th.authorx a, a:hover, a:focus {
	color: #FFF;	

}

th.suggestdatex a, a:hover, a:focus {
	color: #FFF;	
	
}

th.titlex a, a:hover, a:focus {
	color: #FFF;	
	
}
th.bribex a, a:hover, a:focus {
	color: #FFF;	
	
}

Open in new window

LVL 9
Rowby GorenAsked:
Who is Participating?
 
JosefVernerCommented:
Oh, now I see there was a misunderstanding :) We are not changing style on hover of a TH link but of a TD link.
td a:hover {
	color: #000;
}

Open in new window

should do the trick.
0
 
JosefVernerCommented:
Override the a:hover {} definition with:

th a:hover { color: #000; }
0
 
LZ1Commented:
Line 181:
http://hypermastery.com/components/com_suggestvotecommentbribe/assets/suggestvotecommentbribe.css

th.bribex a, a:hover, a:focus {
      color: #FFF;      
      
}
 

Change that to whatever color you need.  For example:

th.bribex a, a:hover, a:focus {
	color: #000;	
	
}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Rowby GorenAuthor Commented:
HI JosefVerner:

I'm working on your suggestion first  

To override the th styling in the adminlist table I tried the below code.  Putting your CSS before my code to take advantage of cascading.  But it didn't help.

With the new snippet in place I still get the white font when hovering over the text below the Title column ("Music for Harmonicas")

Perhaps I am not doing the overriding correctly?   I obviously need some fine tuning!

Rowby
0
 
Rowby GorenAuthor Commented:
Forgot to include my code (it's at the tail end of the external style sheet)




th a:hover { color: #000; 
}


th.gridsortx a, a:hover, a:focus {
	color: #FFF;	
	
}

th.suggvotesx a, a:hover, a:focus {
	color: #FFF;

}

th.suggcommentsx a, a:hover, a:focus {
	color: #FFF;	

}

th.authorx a, a:hover, a:focus {
	color: #FFF;	

}

th.suggestdatex a, a:hover, a:focus {
	color: #FFF;	
	
}

Open in new window

0
 
JosefVernerCommented:
Actually LZ1 gave you more specific advice.
You need to either remove the color from th.class a
or
specify the color for every th.class a
or
you can try override id with "stronger" declaration such as:
#tablecell th a:hover {
	color: #000;
}

Open in new window


or

th.gridsortx a:hover,
th.suggvotesx a:hover,
th.suggcommentsx a:hover,
th.authorx a:hover,
th.suggestdatex a:hover {
	color: #000;
}

Open in new window

0
 
Rowby GorenAuthor Commented:
Hi  

Thanks for your help and patience!  

First remind me.  To override the th's I assume I need to put the overriding code BEFORE the rest of the code. per my below example.

Also the table does not have an id. It is a class (at least that's the way the html is currently written. So instead of your suggestion

#tablecell th a:hover {
      color: #000;
}

I modified it to a class:

.tablecell th a:hover {
      color: #000;
}

In either case it apparently didn't work.
BTW your code calls it tablecell  but it is actually  table class="adminlist"

Is tablecell a generic way to style a tablecell?  Or is that just a "made up" identification for your example

:)

Rowby

.tablecell th a:hover {
	color: #000;
}
th.authorx a, a:hover, a:focus {
	color: #FFF;	

}

th.suggestdatex a, a:hover, a:focus {
	color: #FFF;	
	
}

th.titlex a, a:hover, a:focus {
	color: #FFF;	
	
}
th.bribex a, a:hover, a:focus {
	color: #FFF;	
	
}

Open in new window

0
 
Rowby GorenAuthor Commented:
Should I put

td a:hover {
      color: #000;
}

before or after all of my styles to get it to override them.

Thanks!
0
 
JosefVernerCommented:
Since there isn't any previous definition of TD A so it doesn't matter but if there was an you would have to put the new one after it.
0
 
Rowby GorenAuthor Commented:
Thanks JosefVerner

That did the trick.

And thanks LZ1 for your assist.

Rowby
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.