CODEWITHSUNDEEP
htmlcss
Lea
Lea

Reputation: 934

Controlling the HTML "a tag" with css

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.

Upvotes: 1

Views: 7781

Answers (6)

zzeroo
zzeroo

Reputation: 5646

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

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

Upvotes: 0

ChrisW
ChrisW

Reputation: 56123

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.

Upvotes: 0

peirix
peirix

Reputation: 37771

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; }

Upvotes: 3

junmats
junmats

Reputation: 1924

just a sample:

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

Upvotes: 0

Oded
Oded

Reputation: 499392

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;}

Upvotes: 1

Quentin
Quentin

Reputation: 944555

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 { }

Upvotes: 0

Related Questions