homepage Welcome to WebmasterWorld Guest from 54.237.57.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
background overtakes upon click
badams1

10+ Year Member



 
Msg#: 4493860 posted 4:13 pm on Sep 11, 2012 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4493860 posted 12:52 pm on Sep 13, 2012 (gmt 0)

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

10+ Year Member



 
Msg#: 4493860 posted 2:19 pm on Sep 14, 2012 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4493860 posted 10:32 pm on Sep 14, 2012 (gmt 0)

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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved