What's wrong with this css declaration?

by 6 replies
8
Here it is, but it doesn't work.

Code:
#nav li a:hover{display:block;color:#03f;background:#def;text-decoration:underline;padding:2px 0 0 3px;}
I would like the hover state to have a change of background color, and an underline. Except for a single time when editing css with the web developer toolbar, the underline would not show up. FF IE Chrome, Safari, and Opera, all did the same.

I suppose it is because I am giving 2 indications of hover, and the browsers think that one is enough. (Do browsers think? )

Or is there something I am missing something else?
#website design #css #declaration #wrong
  • I don't see anything wrong with that CSS. Perhaps the problem is with your HTML code. What's the URL?
  • You mention 2 indications of hover, can you show the other css statement for hover?

    Regards,
    Dave Seldon
  • Sorry, I wasn't clear about that. The 2 indications are both in that declaration. I meant that the background color changes, and it also underlines on hover. Doing just one or the other is easy.

    #nav li a:hover

    background:#def;

    text-decoration:underline;

    I was just wondering if there is a reason both can't be done. All the browsers so far will display the bg color, but not the underline. (cept ff in 'edit css' mode once)
  • It may have happened once because you saw it being ruled by a:hover, but now it's taking rules from a:visited?

    So I guess the way to test this would be in a new browser which hasn't visited the link, or clearing the cache?
    • [ 1 ] Thanks
    • [1] reply
    • I don't have it on a site yet. I'm still just trying to get it to work on the desktop.

      That was an interesting thought. I'd already cleared the browsing history, and had also selected 'forget about this site' from browsing history. Turns out I was messing around with too many css sheets and had linked to the wrong one. (sigh)

      It seems to be sorted out now and both the background color and the underline are working at the same time.
  • Banned
    [DELETED]
  • Banned
    [DELETED]
  • Hi Lloyd,

    this usually happens if you have a previous rule declared globally for the same element.

    For example:

    If I do this...

    Code:
    #wrapper a {
color: #990000
}
    And then later...

    Code:
    #nav a {
color: #ffffff;
}
    It may still render links with #990000 because #nav is within the wrapper.

    So, I do this...

    Code:
    #wrapper div#nav a {
color: #ffffff;
}
    Which fixes it.

    I'm assuming this is the problem, based on the limited information I have from your post - if you want to put the page up in a dummy folder, I'll be happy to confirm this for you with some testing.

    == edited to add ==

    Sorry, missed your later post about having fixed the issue and finding it was due to an older stylesheet. The above is good practice for ensuring good hierarchy and consistent rendering.
    • [ 1 ] Thanks
Join the discussion

Next Topics on Trending Feed

  • 8

    What's wrong with this css declaration?

    Here it is, but it doesn't work. Code: #nav li a:hover{display:block;color:#03f;background:#def;text-decoration:underline;padding:2px 0 0 3px;} I would like the hover state to have a change of background color, and an underline. Except for a single time when editing css with the web developer toolbar, the underline would not show up. FF IE Chrome, Safari, and Opera, all did the same.