background overtakes upon click

[badams1]

I'm not entirely sure this is a css issue, it may be javascript. Anyways, I just came into this project, the code was already written but we noticed a problem. When you click anywhere in the menu it turns the whole thing gold, you can't see any of the links within that section of the menu. You can click on it again and it will return back to the normal state. This only happens in Internet Explorer 9 and Chrome. Internet Explorer 8 runs the site in mobile mode, but I think that is another problem that can be dealt with. No problems in Firefox.

I wasn't sure if a image displaying the problem is allowed so I didn't put it in here (but it can be seen from my profile).


CSS

/* Buttonbar
---------------------------------- */

#buttonbar {
   background: transparent url(/files/images/bbbackground.png) repeat-x;
height: 35px;
   width: 93.75%;
   margin-bottom: 10px;
overflow:hidden;
display:block;
position:relative;
   margin: 0px 3.75% 1.669% 3.125%;
   padding; 0;
}

#bar
{
   width: 100%;
margin: 0 auto;
   padding: 0;

}


#bar a,
#bar a:visited
#bar a:active {
   color: #000;
}
#bar li {
display:block;
color:#000;
line-height: 35px;
font-size: .7em;
   font-weight: bold;
   text-decoration: none;
   text-transform: uppercase;
   text-align: center;
float:left;
position:relative;
   width: 14.25%;
}


#bar li ul {
position:absolute;
margin: 0;
   padding: 0;
   width: 100%;
   min-width: 128px;
overflow:hidden;

}

#bar li#prospective li ,
#bar li#students li,
#bar li#academics li,
#bar li#facstaff li,
#bar li#parents li,
#bar li#alumni li,
#bar li#visitors li{
float:none;
background-color:#fef0b7;
background-image:none;
text-indent:0;
overflow:hidden;
font-size: .9em;
line-height: 1.5em;
padding: 3px;
   text-transform: none;
   text-align: left;
   margin: 0;
   list-type: none;
   font-weight: normal;
   width: 150%;
   min-width: 128px;
   border-left: thin solid #ffffff;

}
#bar li li a:hover {
   text-decoration: underline;
}

#bar li#prospective li.last-item,
#bar li#students li.last-item,
#bar li#academics li.last-item,
#bar li#facstaff li.last-item,
#bar li#parents li.last-item,
#bar li#alumni li.last-item,
#bar li#visitors li.last-item {
   background-color: #ffc426;
   font-weight: bold;
}
#togglemenu {
 display: none;
}
#bar li#quicklinks {
  display: none;
}

#bar a.nolink:hover {
  text-decoration: none;
}

html (html 5 doctype)

 <li id="prospective" class="rightborder" onclick="javascript:showElement('prospective-links')">Future Students
  <ul id="prospective-links">
   <li><a href="/admissions">Undergraduate Admissions</a></li></ul>...

just in case the javascript is needed

function showHide() {
 var s=document.getElementById("buttonbar").style;
 if ($(window).width() > 949) {
  s.display = "block";
  document.getElementById("prospective-links").style.display = "block";
  document.getElementById("current-links").style.display = "block";
  document.getElementById("academic-links").style.display = "block";
  document.getElementById("facstaff-links").style.display = "block";
  document.getElementById("parent-links").style.display = "block";
  document.getElementById("alumni-links").style.display = "block";
  document.getElementById("visitor-links").style.display = "block";
$("#accordion").accordion('destroy');
  $("#buttonbar").unbind('mouseenter');
  $("#buttonbar").unbind('mouseleave');
$.fn.pause=function(a){$(this).stop().animate({dummy:1},a);return this};
function mouseleft(){$("#buttonbar").triggerHandler("mouseleave")}
$(document).ready(function()
 {$("#buttonbar").mouseenter(function(){$(this).stop().pause(160).animate({height:"12.7em"},400,"easeOutQuart")}).mouseleave(function(){$(this).stop().pause(160).animate({height:"2.2em"},400,"easeOutQuart")});});$(function(){$("#accordion").accordion({fillSpace:!0,icons:{header:"accordion-header",headerSelected:"accordion-headerselected"}})});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
  $("#buttonbar li").bind('touchstart', function(){
    console.log("touch started");
  });
$("#buttonbar li").bind('touchend', function(){
    console.log("touch ended");
  });
}

 }
 else {
  /*$("#accordion").accordion({active:false});*/
  $("#accordion").accordion('destroy');
  $("#buttonbar").unbind('mouseenter');
  $("#buttonbar").unbind('mouseleave');
  $("#buttonbar li").unbind('touchstart');
  $("#buttonbar li").unbind('touchend');

  s.display = "none";
  document.getElementById("prospective-links").style.display = "none";
  document.getElementById("current-links").style.display = "none";
  document.getElementById("academic-links").style.display = "none";
  document.getElementById("facstaff-links").style.display = "none";
  document.getElementById("parent-links").style.display = "none";
  document.getElementById("alumni-links").style.display = "none";
  document.getElementById("visitor-links").style.display = "none";
  /*$("#buttonbar").accordion('destroy');*/

 }

}

Thanks

[alt131]

HI badams1, unfortunately I can't reproduce the issue on the provided code. Can you provide more detail - and maybe these questions will help track down the issue. First, which ul's are buttonbar and bar? Second there are two gold-ish colours: #FEF0B7 (on #bar li#prospective li), and #ffc426 (on #bar li#prospective li.last-item) - which one is the colour being displayed on mousedown?

[badams1]

This bit of JS may be needed as well.

else {
function showElement(d){
 var s=document.getElementById(d).style;
 if (s.display != "block" ) { s.display = "block"; } else { s.display = "none"; }
};

I think it is the ffc426. If I comment out this line of the css, upon clicking it will display black instead of any of the gold colors:

#buttonbar {
background: transparent url(/files/images/bbbackground.png) repeat-x;

[alt131]

Hi badams1, thanks for that, unfortunately still not able to reproduce the issue. However, the provided javascript deals with the show/hide function rather than styles, so Iit's not giving me any clues at this stage. The only place #ffc426 appears in the provided css is in the rule set starting with #bar li#prospective li.last-item, so I'd suggest start searching across two themes. The first is in the css, looking looking for a rule that stes background-color, the second is whether the javascript that explicitly sets a background-color, or inserts class names that will set a background-color.

It's a bit hard to suggest starting places without knowing how the css relates to the HTML, but have you analysed the code using something like firebug? Here's a couple of questions I'd ask when looking at the css:
1. What are the background-colour without javascript enabled? That will help identify whether the issue is with the javascript.
2. Where else does the colour #ffc426 appear in the css? That will help identify what rules sets might be setting the colour.
3. If commenting out that line sets a background-color:black, it must be inherited from somewhere - where is black specified as a background-color? That might be a clue as to what style rule is over-riding the black and setting gold.
4. Given this only happens on mouse click, is there a colour set for :active in the css?