Css for current page item menu

[Jim123]

Hi, I'm stuck. I want to have the current page link (image) highlighted but I can't figure out the right css. Really stupid that I can't find it...

This is the code on the page

<div id="menubar">
<div class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-home menu-item-30"><a title="Home" href="http://localhost/yeah/">Home</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-31 current_page_item menu-item-34"><a title="Produk" href="http://localhost/yeah/product">Product</a></li>
</ul></div></div>

This is the css I have now

#menubar{
width:544px;
height:39px;
position:absolute;
margin:82px 0 0 202px;
background:url(images/menubg.gif) no-repeat;
}

#menubar ul li {
 display: block;
 float: left;
 font-size: 12px;
 list-style: none outside none;
 text-align: center;
}

#menubar ul li a {
color:#000;
font-weight:bold;
font-family:"Arial Black", Gadget, sans-serif;
}

#menubar #menu-item-30 a {
color: #008800;
 font-family: "Arial Black",Gadget,sans-serif;
 font-weight: bold;
height:39px;
background-image:url(images/tombol-on_01.jpg);
text-indent:-9999px;
display:block;
width:60px;
padding-right:11px;
}

#menubar #menu-item-30 a:hover {
color:#1d6fc7;
}

#menu-item-30 li {
padding-right:11px;
display:block;
}

#menubar #menu-item-34 a {
color: #008800;
 font-family: "Arial Black",Gadget,sans-serif;
 font-weight: bold;
height:39px;
background-image:url(images/tombol-off_02.jpg);
text-indent:-9999px;
display:block;
width:79px;
}

#menubar #menu-item-34 a:hover {
background-image:url(images/tombol-on_02.jpg);
}

#menubar #menu-item-34 .current-page-item a {
color: #008800;
 font-family: "Arial Black",Gadget,sans-serif;
 font-weight: bold;
height:39px;
background-image:url(images/tombol-on_02.jpg);
text-indent:-9999px;
display:block;
width:79px;
}

The links to the images are OK.

Anyone an idea?

Thanks

[milosevic]

Hi Jim123, just for a test, stick !important on the end of this rule: background-image:url(images/tombol-on_02.jpg);

for #menubar #menu-item-34 .current-page-item a {

A couple of unrelated tips on your CSS:

DRY - Don't Repeat Yourself -

font-family: "Arial Black",Gadget,sans-serif;

You have declared this for nearly every single selector, which kind of defeats the point of using CSS in making styling controllable by changing single lines of code.

If you add this rule to

#menubar{

#menubar li {

or

#menubar li a{

You would be able to delete all the other instances of it as it would be inherited.

If you make a rule like this:

#menubar .menu-item {
color: #008800;
font-weight: bold;
height:39px;
text-indent:-9999px;
display:block;
}

You can stop repeating yourself for each menu item too and just declare things which are different between menu items in the selectors for individual items, eg:

#menubar #menu-item-30 a {
background-image:url(images/tombol-on_01.jpg);
width:60px;
padding-right:11px;
}

[SuzyUK]

Hi Jim..

couple of obvious problems..

#menubar #menu-item-34 .current-page-item a {...}

your class names are:

current-menu-item

OR

current_page_item

so change to underscores or change "page" to "menu"

the other is that you are targeting "current-page-item" as a child of "#menu-item-34", it's not a child it's the same element..

now to the problem ;).. you can concatenate ID and classnames to target elements should they have two identifiers - so in your case I think something like this should work:

#menubar #menu-item-34.current-menu-item a {
background: #fcf url(images/tombol-on_02.jpg);
}

note the removal of the space between "34.current" that's now not targetting as a child, but chaining the ID and the class..

however support for these chained ID/classes especfially in IE is (or was) buggy, and if you wanted to target them in a "safer" way than this I think specificity would become an issue, however you have another ID in the construct, on the ul which is not being used so it could be used to add specificity if necessary though that would still not make it possible to isolate the ID'd link to match the "current page".

If you find support of the chained classes is not enough for your needs yet, it might be worth moving the "current-menu-item" class onto the <a> element itself if you can - so you can target the <a> as a child of the <li> element
or move the actual identifier "30, 34 etc..) onto the <A>

[added] sorry never saw milosevics reply above

or as milosevic says above !important should work but remove the link Identifier, the imprtant is then overriding the specificity (not something I'm a fan of, but it should work if you can't uniquely identify the link) - presumably there would ever only be one link in the menu that has the "current page" class so you no longer need to identify the <li>, which removes the "chaining" issue

#menubar .current-menu-item a {
background: #fcf url(images/tombol-on_02.jpg) !important;
}

PS: sorry, ignore above background colors, I added colours so I could "see" the image ;)

[Jim123]

Thanks guys, for the replies and advice. I'm going to try it.

[Jim123]

First option of SuzyUK worked. Going to combine your advices and try out the other options you both gave me.

Thanks again for the help.

[Jim123]

How logical your tip sounds, it totally messes up the menu...

#menubar .menu-item {
color: #008800;
font-weight: bold;
height:39px;
text-indent:-9999px;
display:block;
}

You can stop repeating yourself for each menu item too and just declare things which are different between menu items in the selectors for individual items, eg:

#menubar #menu-item-30 a {
background-image:url(images/tombol-on_01.jpg);
width:60px;
padding-right:11px;
}

Removing the multiple font declaration was no problem

[Jim123]

SuzyUK: however support for these chained ID/classes especfially in IE is (or was) buggy

Tested it in the big browsers. No problems.

[milosevic]

Hi Jim123, it should be:

#menubar .menu-item a

for the generic rules,

#menubar .menu-item

My bad sorry