Controlling the HTML "a tag" with css

Question

Hi all,

Bear with me, and my newbie jargon concerning CSS, I don't remember the last time I asked a question about it. I am trying to style a menu, and am having troubles styling the "a tag" inside of the html table. My default a tag styles are:

a:link { color : #69bfc8; text-decoration : none;}
a:visited {color : #69bfc8; text-decoration : none;}
a:hover {color : #606060; text-decoration : none;}

And the styles for the menu are:

td.menu {font-size: 9pt; width:150px; height:7px; border-bottom: 1px solid #e0e0e0;}
td.menu:hover {background: #69bfc8; color: #FFFFFF; } 
td.menu div {padding: 3px;}

The problem Im having is the color attribute isnt applied to "a tags" within the td element upon the hover event. It seems to remain compliant with the default styles. Now I know for sure, that this is more of lacking of my knowledge of CSS, so I dont mean to seem ignorant if I am missing some crucial principle. I just wasnt sure how to ask google this question.

So my question is, what am I missing, how do I style "a tags" within the td element, upon hover of the td element??

Any help is appreciated, thanks, Lea.

Answer 1

The styles that apply to the td elements apply to the td elements.

The styles that apply to the a elements apply to the a elements.

Since the a elements are inside the td elements they inherit various properties from the td elements unless some other piece of CSS sets them to something else. Normally, the default stylesheet built into the browser would apply various properties. In this case the author stylesheet does.

If you want to have different rules for a elements in a td element then you need to write your rules with a descendant selector. You might also want to group the rules if you want multiple selectors to apply to one rule-set.

a { }

td,
td a { }

Answer 2

You can use the following CSS to control the look of an a tag within a td tag:

td a { color : #69bfc8; text-decoration : none;}

Answer 3

just a sample:

td a:hover {color : #606060; text-decoration : none;}

Answer 4

The anchor tags don't inherit text-specific styles, so you need to set them implicitly:

td.menu:hover a { color: #FFFFFF; }

Just remember that IE6 won't fire the td:hover, so it might be better to change your code around a bit, so the anchor tag itself covers the whole space of the td, and then do:

td.menu a:hover { background: #69bfc8; color: #FFFFFF; } 

Answer 5

The problem Im having is the color attribute isnt applied

When you have several mutually contradictory rules which apply to an element, something called "CSS specificity" defines which rule is applied.

I just wasnt sure how to ask google this question.

A lot of the CSS behaviour is defined in just one place, i.e. in the CSS specifications document.

Answer 6

Each item should, with a display: block and a height and width set at 100%.

a {display:block; width:100%; height;100%; }