CSS Forum

**cruizer** · 02:05 PM

I am having a problem and hope someone can help.
I have a .css horizontal navigation bar, and everything works great except for the current page text color. I need the color of the text on the current page to be black. Apparently I am missing something.

Here is the example page (only the first three menu items are linked for this test):
http://calumettesting.cgsart.com/test/home.html

my .css code

Code:

ul#menu{
margin:0;
padding:0;
list-style-type:none;
width:911;
position:relative;
display:block;
height:29px;
font-size:14px;
background:url("http://www.webmaster-talk.com/images/nav_bar3.gif") no-repeat;
font-family:Verdana,sans-serif;
overflow:hidden;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;
}
ul#menu li a{
display:block;
float:left;
text-decoration:none;
text-align:center;
padding-top:1px;
height:19px;
width:113px;
color:#ffffff;
}
ul#menu li a:hover {
background:transparent url("http://www.webmaster-talk.com/images/button_over.gif");
}
ul#menu li a:active,
#home #nav_home,
#about #nav_about,
#practice #nav_practice,
#links #nav_links,
#disclaimer #nav_disclaimer,
#contact #nav_contact {
height:20px;
color:#000000;
background:transparent url("http://www.webmaster-talk.com/images/nav_bar2.gif");
}

My .html nav bar code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Harris Law Firm, P.C.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css" />
 
</head>
<body id="home">
 
<ul id="menu">
<li id="nav_home"><a href="home.html" target="_self" title="Home">Home</a></li>
<li id="nav_about"><a href="about.html" target="_self" title="About Us">About Us</a></li>
<li id="nav_practice"><a href="practice.html" target="_self" title="Practice">Practice Areas</a></li>
<li id="nav_links"><a href="links.html" target="_self" title="Helpful Links">Helpful Links</a></li>
<li id="nav_disclaimer"><a href="disclaimer.html" target="_self" title="Disclaimer">Disclaimer</a></li>
<li id="nav_contact"><a href="contact.html" target="_self" title="Contact">Contact</a></li>
</ul>
 
</body>
</html>

Thanks!

**jim.thornton** · 04-17-2009, 06:09 PM

It probably has to do with specifity or whatever it is called. Try defining a new class:

.black { color: #000000; }

Then add the class "black" to the <a> tag that is active for each page.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Harris Law Firm, P.C.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css" />
 
</head>
<body id="home">
 
<ul id="menu">
<li id="nav_home"><a href="home.html" target="_self" title="Home" class="black">Home</a></li>
<li id="nav_about"><a href="about.html" target="_self" title="About Us">About Us</a></li>
<li id="nav_practice"><a href="practice.html" target="_self" title="Practice">Practice Areas</a></li>
<li id="nav_links"><a href="links.html" target="_self" title="Helpful Links">Helpful Links</a></li>
<li id="nav_disclaimer"><a href="disclaimer.html" target="_self" title="Disclaimer">Disclaimer</a></li>
<li id="nav_contact"><a href="contact.html" target="_self" title="Contact">Contact</a></li>
</ul>
 
</body>
</html>

**cruizer** · 04-17-2009, 08:41 PM

I just tried what you suggested, but unfortunately that did not change a thing.

**jim.thornton** · 04-17-2009, 10:21 PM

You have to change a couple of things:

Change the HTML markup to:

Code:

<ul id="menu">
<li id="nav_home"><a href="home.html" target="_self" title="Home" class="black">Home</a></li>
<li id="nav_about"><a href="about.html" target="_self" title="About Us">About Us</a></li>
<li id="nav_practice"><a href="practice.html" target="_self" title="Practice">Practice Areas</a></li>
<li id="nav_links"><a href="links.html" target="_self" title="Helpful Links">Helpful Links</a></li>
<li id="nav_disclaimer"><a href="disclaimer.html" target="_self" title="Disclaimer">Disclaimer</a></li>
<li id="nav_contact"><a href="contact.html" target="_self" title="Contact">Contact</a></li>
</ul>

Then change your CSS from:

Code:

ul#menu li a:active, #home #nav_home, #about #nav_about, #practice #nav_practice, #links #nav_links, #disclaimer #nav_disclaimer, #contact #nav_contact {
background:transparent url(images/nav_bar2.gif) repeat scroll 0 0;
color:#000000;
height:20px;
}

to this:

Code:

ul#menu li a.black, #home #nav_home, #about #nav_about, #practice #nav_practice, #links #nav_links, #disclaimer #nav_disclaimer, #contact #nav_contact {
background:transparent url(images/nav_bar2.gif) repeat scroll 0 0;
color:#000000;
height:20px;
}

I tested it with Firebug and it works. Basically you are just replacing the :active with .black. Then you have to add the class to the <a> tag of the appropriate page.

**splatodesign** · 04-19-2009, 09:16 AM

**** good luck!

**cruizer** · 04-20-2009, 12:32 PM

Technically, it does work, but now when you mouseover the active link, you just get a big black box, the text doesn't turn to white to be visible. Is there a way to keep the css mouseover from working on the active page?

Thanks a lot for all your help thus far!

I have updated the linked page, and the css code.

Code:

ul#menu{
margin:0;
padding:0;
list-style-type:none;
width:911;
position:relative;
display:block;
height:29px;
font-size:14px;
background:url("images/nav_bar3.gif") no-repeat;
font-family:Verdana,sans-serif;
overflow:hidden;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;
}
ul#menu li a{
display:block;
float:left;
text-decoration:none;
text-align:center;
padding-top:1px;
height:19px;
width:113px;
color:#ffffff;
}
ul#menu li a:hover {
background:transparent url("images/button_over.gif");
}
ul#menu li a.black, 
#home #nav_home, 
#about #nav_about, 
#practice #nav_practice, 
#links #nav_links, 
#disclaimer #nav_disclaimer, 
#contact #nav_contact { 
background:transparent url(images/nav_bar2.gif) repeat scroll 0 0; 
color:#000000; 
height:20px; }

**jim.thornton** · 04-20-2009, 12:44 PM

It seems as though it is working as you want now. Have you got it all working?

**cruizer** · 04-20-2009, 02:31 PM

I know have it working the way I wanted too. I did a little restructuring of the .css, and I added the class="black" identifier to the li tag, and removed the link for the active links page. Not exactly ideal, but it get's the job done.

Thanks a lot for your help!

**LadynRed** · 04-21-2009, 02:45 PM

You must also specify the pseudo class in SPECIFIC ORDER for things to work correctly: Link, Visited, Hover, Active - think LoVeHAte