A:Active Firefox Issues

Hello all,

I’m trying to get a simulated button click thing going on with the a:active pseudo class. My code works fine in Chrome and Safari, but not in Firefox.

In Firefox, when you click one link, they all do the effect. In Chrome, only that link that’s clicked gets the effect.

Does anyone see any apparent issues?

XHTML:

[CODE]
<ul id=”main-nav”>

<li class=”nav-item”>
<a href=”#”>
About Our Company
</a>
</li>

<li class=”nav-item”>
<a href=”#”>
Automotive Testing
</a>
</li>
….etc, etc
[/CODE]

CSS:

[CODE]
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active { position:relative; top:1px;}

#main-nav { width:100%; background:url(../../images/nav-background.png) repeat-x; height:60px; position:relative; z-index:5; margin:-62px 0px 0px 0px; }
#main-nav li {
display:inline-block;
padding:0px 10px;
margin: 15px 15px 0px;
zoom:1;
*display: inline;
}

#main-nav li a {
font-weight:bold;
font-size:16px;
color:#021c26;
text-shadow: 0px 1px 0px rgba(204,204,204,0.5);
text-decoration:none;
display:block;
}

#main-nav li:first-child { margin-left:25px; }

[/CODE]

And here’s a link so you can see what I’m talking about: [URL=”http://www.testingandsimulation.com/wordpress/”]http://www.testingandsimulation.com/wordpress/[/URL]

THANKS!

–Nick

Also in #CSS _↴