Font color of list item doesn’t inherit correctly from CSS

I have the following headermenu:

%div.header
  %div.span-25
    = link_to logo, root_path
  %div.span-25
    %div.headermenu
      %ul
        - if current_page?(root_path)
          %li.currentmenu
            = link_to "Home", root_path
        - else
          %li
            = link_to "Home", root_path
        - if current_page?(user_path)
          %li.currentmenu
            = link_to "User", user_path
        - else
          %li
            = link_to "User", user_path

In the styleshhet I have:

.headermenu {
  border-radius:0px 0px 5px 5px;
  -moz-border-radius:0px 0px 5px 5px;
  margin-top:-5px;
  position:relative;
  display:block;
  height:42px;
  font-size:11px;
  font-weight:bold;
  background:transparent url('darkgray_background.gif') repeat-x top;
  font-family:Arial,Verdana,Helvitica,sans-serif;
  text-transform:uppercase;
}

.headermenu ul {
  margin:0px;
  padding:0;
  list-style-type:none;
  width:auto;
}

.headermenu ul li {
  display:block;
  float:left;
  margin:0 1px 0 0;
}

.headermenu ul li a {
  display:block;
  float:left;
  color:#000;
  text-decoration:none;
  padding:13px 12px 0 12px;
  height:28px;
}

.currentmenu {
  color:#fff;
  border-radius:5px;
  -moz-border-radius:5px;
  background:transparent url('darkgray_backgroundOVER.gif') no-repeat top center;
}

So, the current header menu will be highlighted. The background image of the highlighted menu is correct (‘darkgray_backgroundOVER.gif’), but the font is black (#000), and not #fff as it supposed to be. Firebug shows a cancelled out font from currentmenu:

Inherited from li.currentmenu element.style { color: #FFFFFF;
}

Instead above this is shows:

.headermenu ul li a { color: #000000; etc…. }

Why doesn’t it display the font in white? In black it’s almost not legible. What can I do to have the font of the current menu in white and keep the font of the other (not current menus) in black?

Problem courtesy of: user929062

Solution

You need to specify the color on the anchor tag itself, not just the menu class. Your CSS isn’t specific enough, and so the #000 over-rides.

li.currentmenu a{ 
color:#fff;
border-radius:5px;
-moz-border-radius:5px;
background:transparent url('darkgray_backgroundOVER.gif') no-repeat top center;
}

will be more specific and should target the anchor tag correctly.

Solution courtesy of: dmc

Discussion

It’s probably a specificity issue, just do this:

li.currentmenu a{
color:#fff !important;
border-radius:5px;
-moz-border-radius:5px;
background:transparent url('darkgray_backgroundOVER.gif') no-repeat top center;
}

Discussion courtesy of: Rick Calder

That’s because .currentmenu
selector isn’t as specific as .headermenu ul li a
.

Just change .currentmenu
selector to .headermenu .currentmenu a

.headermenu .currentmenu a {
  color:#fff;
  border-radius:5px;
  -moz-border-radius:5px;
  background:transparent url('darkgray_backgroundOVER.gif') no-repeat top center;
}

Discussion courtesy of: Elvis88

This recipe can be found in it’s original form on Stack Over Flow
.

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Font color of list item doesn’t inherit correctly from CSS

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录