Basic and simple CSS question - menu creation

I've a table with <td> elements, which contain a links <a>. I've applied a hover for <td> to make it 'red'. It works, however my problem is, that the link itself has still the 'blue' color. It changes only when my mouse also over the link itself.

How can I fix this problem?

 

Not sure what you mean. The hover only works when the mouse is on the actual letters but not around the letters (the rest of the td?)?

Not sure if this works the same with tables, but with a menu made of a refs inside list elements (li), the same problem can come about. Two solutions:

one is to make the hover also affect the td itself. For example:
td :hover, td a:hover {
color: red;
}
So the hover works outside the actual letters... dunno if the link part will actually still work outside the letters though, and won't work for IE6 or below as it only recognises hover on links (unless you wanna Javascript it).

Or, you can give the a refs a display:block, which changes them from inline element to block element, wherein you can set widths and heights irregardless of the actual text heights and widths. Setting the height and width of the a to be the same as the td should make the whole area clickable (except for a small strip on the top, which I always get with list elemets because I use padding-top on the list to push the text to the middle... if you're writing old code in a table, you could maybe still use the deprecated valign).

 

Thx for your reply. I'll give it a try and post the response.

Thank you for your time.

I appretiate !!

Juraj

 

It works!

The display:block solved my problem.

Thank you!

 

Hello,
Here you have a couple of examples

http://www.dynamicdrive.com/style/csslibrary/category/C1/