6 Replies - 516 Views - Last Post: 24 February 2014 - 03:31 PM

#1 Hashim1  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 19
  • Joined: 13-June 12

Simple CSS Pseudo-Class Problem

Posted 22 February 2014 - 06:47 PM

Hey there.

I'm having a CSS problem with the navigation bar on my website. The menu bar is written entirely in CSS, and I've already managed to get a 3-pixel animated CSS line to underline the currently-selected button, as well as follow the mouse when the menu items are being rolled over. What I want now is for the text in each of the buttons/menu items to change to yellow (#FFCC33) when it is selected, just as a further indication of the page that is currently selected. It's as simple as that, except it's just not working for me.

Here's the relevant code for the HTML page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
       </div> 
       <div id="menubar">
       <ul id="gooeymenu3" class="underlinemenu" >
        <li ><a href="index.html" class="selected">Home</a></li>
        <li><a href="What Is Web Design.html">What Is Web Design?</a></li>
        <li><a href="What Is Freelancing.html">What Is Freelancing?</a></li>
        <li><a href="What It Involves.html">What It Involves</a></li>
        <li><a href="What You'll Need.html">What You'll Need</a></li>
        <li><a href="The Legal Stuff.html">The Legal Stuff</a></li>
        <li><a href="The Safety Stuff.html">The Safety Stuff</a></li>
        <li><a href="Making The Grades.html">Making The Grades</a></li>
       </ul>
       <div>


And the code for the navigation bar. You can disregard everything except line 51, the relevant part, unless you think another part may be the cause of the problem.

#menubar
{
  width:1300px;
  position:relative;
  margin-top: 50px;
  margin-bottom:30px;
  margin-left:auto;
  margin-right:auto;
  background:transparent;
  text-align:center;
  color:#000; /*Colour of the menu bar, not the container. */
  } 

ul li.active{ /*IE6 hack- hide gooey effect from that browser*/
_visibility:hidden; /*IE6 rule*/
}

ul.underlinemenu {
padding:0px;
list-style: none;
position:relative;
text-align: center; /*set value to "left", "center", or "right"*/
}

ul.underlinemenu li{
display: inline;
padding-bottom:5px;
}

ul.underlinemenu li a{
font: 14px Cabin, sans-serif;
color:#000; /*Color of the menu bar's text.*/
padding: 2px;
letter-spacing:0.2px;
margin-right: 15px; /*spacing between each menu link*/
text-decoration:none;
}

ul.underlinemenu li a:hover, .ul.underlinemenu li a:active, ul.underlinemenu li a:visited {
  border: none;
}

ul.underlinemenu li a:hover {
	color:#FC3;
}

li.active { /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
border-bottom:4px solid;
border-bottom-color:#FC3;
color:#FC3; \\This is it - the one line in the file that just doesn't want to gel. All the statements in this block of code - the ones directly above it - work perfectly.
}

/*#arrowup {
width: 0; 
	height: 0; 
	border-left: 6px solid transparent;  /* left arrow slant */
	 /*border-right: 6px solid transparent; right arrow slant 
	border-bottom: 6px solid navy; bottom, /*add background color here
	font-size: 0;
	line-height: 0;	
}
  */


The problem is on line 51: I'm simply adding color:#FC3; to li.active{}. Bizarrely, however, adding this extra line (highlighted in red in the CSS below) to the code just doesn't work, even if the statements directly above it (position:absolute; border-bottom:4px solid; border-bottom-color:#FC3;) work perfectly.

This isn't the main CSS file that deals with the whole page, just the one relevant to the menu bar - if anyone thinks the problem might be in the main file rather than this one, let me know and I'll upload that, too. There are also two other JS files that control the animation of the menu's animated underline effect mentioned earlier, but I doubt they're relevant, so I've also left those out.

It seems like such a small thing to me, but after so long, I still just can't pinpoint what it is. I figure it's either something so small it's invisible, or just one of those random quirks of a language that are exceptions to the rule and that you only find out through encountering them.

Thanks in advance to anyone who can help me out. Would be really appreciated. :)

This post has been edited by Hashim1: 22 February 2014 - 06:51 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Simple CSS Pseudo-Class Problem

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3636
  • View blog
  • Posts: 5,759
  • Joined: 08-June 10

Re: Simple CSS Pseudo-Class Problem

Posted 22 February 2014 - 09:04 PM

Hey.

If you examine the element in your browser's web development tools, can you check out which style blocks are being applied to it, and find the one who's color is actually being used?

Based on what you posted, my suspicion is that the color in your li.active selector is being overridden by a more specific selector: ul.underlinemenu li a. - This is assuming that the text your li.active block is meant to color is actually in an <a> tag within the <li>. Right?

CSS rules aren't just determined by order of last to first, but also by the specificity of the selectors; a less specific selector later in the document can in fact be overruled by a more specific selector earlier on.

Try changing the active block's selector to be more specific; to specifically target the same <ul>, and to actually target the <a> inside the <li>.
ul.underlinemenu li.active a { ...}


Was This Post Helpful? 1
  • +
  • -

#3 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 165
  • Joined: 12-November 12

Re: Simple CSS Pseudo-Class Problem

Posted 24 February 2014 - 02:14 PM

I suspect that your class of 'selected' is potentially overriding your li.active color and that's why the rest of the properties appear but not the color. Like Atli stated, learn to use your dev tools, if you don't know how to use them a quick google search for '[insert browser name here] dev tools'.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,576
  • Joined: 12-December 12

Re: Simple CSS Pseudo-Class Problem

Posted 24 February 2014 - 02:41 PM

You may have solved this already but..

Quote

What I want now is for the text in each of the buttons/menu items to change to yellow (#FFCC33) when it is selected

what is your intended meaning of selected? If you mean if it has the class-named selected then the css-selector would be based on .selected; that is, the element(s) with this class-name.

If you mean when it is active - that is, the mouse is pressed on it - then this most often refers to a-links and the :active pseudo-class (although it can apply to other elements). So the css would be based on a:active. Your css is currently looking for elements having the class-name active (.active) and there are none.

Note that the active state only applies very briefly, as the element is clicked on.

:active :CSS-Tricks

This post has been edited by andrewsw: 24 February 2014 - 02:43 PM

Was This Post Helpful? 3
  • +
  • -

#5 Hashim1  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 19
  • Joined: 13-June 12

Re: Simple CSS Pseudo-Class Problem

Posted 24 February 2014 - 02:55 PM

An update to this. It seems my problem boiled down to simply not understanding what the :active pseudoclass actually does. I'd gathered, from my initial research on it, that it applies when a page is clicked on, and took "active link" to mean the active page, i.e. the page the user is currently on, rather than the link currently being clicked. After posting this thread, I did some more research and realised I'd misunderstood. From then on, the problem was easily solved. I created a new ID called "current" and applied it to the relevant link on each individual page. This fulfilled my initial purpose of having the currently-selected page highlighted perfectly.

Sorry for the misunderstanding, and thanks to all who have taken the time out to help. It really is appreciated. :)
Was This Post Helpful? 1
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,576
  • Joined: 12-December 12

Re: Simple CSS Pseudo-Class Problem

Posted 24 February 2014 - 02:59 PM

Glad you sorted and thank you for reporting back.

I'm surprised my colleagues didn't pick-up on the difference between .active and :active ;)
Was This Post Helpful? 2
  • +
  • -

#7 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 165
  • Joined: 12-November 12

Re: Simple CSS Pseudo-Class Problem

Posted 24 February 2014 - 03:31 PM

View Postandrewsw, on 24 February 2014 - 04:59 PM, said:

Glad you sorted and thank you for reporting back.

I'm surprised my colleagues didn't pick-up on the difference between .active and :active ;)/>


I did notice that there was no attached .active class to the element, but had seen an extra space on the first li elements bracket so thought that for some reason he had removed it. I figured I would let him try out the developer tools before getting too in depth. Even still, I wouldn't have thought about the :active pseudo element right off the bat, good call.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1