Basic and simple CSS question - menu creation

Discussion in 'CSS' started by durino13, Oct 22, 2007.

  1. #1
    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?
     
    durino13, Oct 22, 2007 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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).
     
    Stomme poes, Oct 22, 2007 IP
  3. durino13

    durino13 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thx for your reply. I'll give it a try and post the response.

    Thank you for your time.

    I appretiate !!

    Juraj
     
    durino13, Oct 22, 2007 IP
  4. durino13

    durino13 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It works!

    The display:block solved my problem.

    Thank you!
     
    durino13, Oct 22, 2007 IP
  5. jakomo

    jakomo Well-Known Member

    Messages:
    4,262
    Likes Received:
    82
    Best Answers:
    0
    Trophy Points:
    138
    #5
    jakomo, Oct 22, 2007 IP