8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

What's wrong with this css declaration?

by Lloyd Buchinski
6 replies
  • WEB DESIGN
    • |
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?
#css #declaration #wrong
  • Profile picture of the author Brandon Tanner
    I don't see anything wrong with that CSS. Perhaps the problem is with your HTML code. What's the URL?
    Signature

    {{ DiscussionBoard.errors[7078181].message }}
  • Profile picture of the author seopress
    Originally Posted by Lloyd Buchinski View Post

    I suppose it is because I am giving 2 indications of hover, and the browsers think that one is enough.
    You mention 2 indications of hover, can you show the other css statement for hover?

    Regards,
    Dave Seldon
    {{ DiscussionBoard.errors[7078591].message }}
  • Profile picture of the author Lloyd Buchinski
    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)
    Signature

    Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

    The KimW WSO

    {{ DiscussionBoard.errors[7080596].message }}
  • Profile picture of the author Rockt
    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?
    Signature
    SparkPage.com - Publish Mobile Landing Pages in Minutes. Perfect for PPC, SMS or QR campaigns.
    {{ DiscussionBoard.errors[7080837].message }}
    • Profile picture of the author Lloyd Buchinski
      Originally Posted by Brandon Tanner View Post

      I don't see anything wrong with that CSS. Perhaps the problem is with your HTML code. What's the URL?
      I don't have it on a site yet. I'm still just trying to get it to work on the desktop.

      Originally Posted by Rockt View Post

      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?
      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.
      Signature

      Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

      The KimW WSO

      {{ DiscussionBoard.errors[7081373].message }}
  • Profile picture of the author KarlWarren
    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.
    Signature
    eCoverNinja - Sales Page Graphics & Layout Specialist
    {{ DiscussionBoard.errors[7082800].message }}

Trending Topics