Products
Technologies
A–C
D–H
I–Z
Developer services
Project centers
Developer resources
Community resources
- Adobe Cookbooks (share code)
- CSS Advisor (browser bug fixes)
- Exchanges (share components)
- Adobe Labs
- Adobe Open Source
- Forums
- RSS feeds
- Bug base
- User groups
- Adobe Community Experts (ACE)
- Developer events
Integration
Product documentation
Downloads
Samples
Training and books
- Online training
- Classroom training
- Certification
- Adobe Developer Library
- Adobe Press
- Safari Books Online
Newsletters
Blogs
Archives
ADC program
Additional resources
CSS Advisor
Pseudoclasses work inconsistently in non-IE browsers
Problem
I used the a:active property in css to try and get link colors to update correctly when clicked, but it only works on my Internet Explorer and not Safari or Firefox.
Solution
Pseudoclasses should be defined in a specific order: a:link, a:visited, a:hover, a:active for accurate cross-browser results.
Detailed description
You need to the define the link pseudo classes in a certain order:
Link > Visited > Hover > Active.
Easy way to remember this ordering- LVHA (LoVe HAte).
e.g.
<style type="text/css">
p a:link {
color:#F00
}
p a:visited {
color:#0F0
}
p a:hover {
color:#FF0
}
p a:active {
color:#00F
}
</style>
(solution provided by BigAUIK in comments)
Text ID: ACTIVE
Comments (6)
To add a comment, please Log in.
try focus
by divineparadox on February 27, 2008
have a:active but repeat the style using a:focus
has worked for me in firefox in the past
Active class not working in Mozilla Firefox
by Praveennair on November 22, 2007
Hi this is praveen nair. I am designing a site using this style properties. The active attribute is working fine in IE but not working in Mozilla firefox. If I press the tab then it is showing the code but when i remove the mouse it is disappearing. Not at all staying. Plz help.
<style>
.top-nav:link{
font-size:8pt; COLOR: #525252; Width: 160px; height:34px; Display:block; background:url(../images/topNavImgBase.gif) repeat; line-height:25px; text-decoration:none;
}
.top-nav:visited{
font-size:10px; font-weight:bold; COLOR: #787676; FONT-FAMILY: Tahoma; width: 159px; height:34px; display:block;background:url(../images/topNavImgBase.gif) repeat; line-height:25px; text-decoration:none;
}
.top-nav:hover{
font-size:10px; font-weight:bold; COLOR: #787676; FONT-FAMILY: Tahoma; Display: block; width: 159px; height:34px; background:url(../images/topNavImgover.gif) repeat; line-height:25px; text-decoration:none;
}
.top-nav:active{
font-size:10px; font-weight:bold; COLOR: #787676; FONT-FAMILY: Tahoma; display: block; width: 159px; height:30px;background:url(../images/topNavImgactive.gif) repeat; line-height:10px; text-decoration:none;
}
</style>
You have a few small problems that can be easily fixed & I gave u some ideas too.
by Parrot-3 on November 12, 2007
I've written the code as it could be to make it easier for you to see. The main problems I saw were:
1. You started to put the CSS in the <head> section, but continued below the closing head tag </head>. CSS styles should be in the <head> section and always before the ending </head> tag. Notice how you have <style="text/css"> in the <head> and then another tag <style> below the </head> tag. What you want at the start is:
<style type="text/css">
<!--
with that first comment tag to hide CSS from old browsers and at the end have
-->
</style>
</head>
which finishes the hiding from old browers and ends the style block.
2. Your hover and active color are both orange. While this isn't necessarily bad, it won't show any change when someone clicks. As their mouse hovers over the link it will turn orange and when they click it will stay orange. If you change the active color to red (or any other color) or changed the hover color to something different the active color will change obviously. I put in a different type of link coloring style to give you an idea.
It is also VERY IMPORTANT to write your code correctly. I don't mean in any order, but take a look at your link labeled 'a' just under h3. You have:
a
{
blah, blah, blah
NO ENDING TAG HERE
a:hover
{ blah, blah,
blah
}
-- at that end of that 1st link style there is no ending tag - as in } so the hover tag won't work.
Without both beginning { and ending } each CSS style, nothing will work correctly.
Your link 'list' section ends with a </p> but doesn't start with a <p>, it starts with a break. <br /> Start and end with the same tag, esp. in XHTML.
<p>....</p>
For links it is common and good to use unordered lists:
<ul>
<li><a href="#" title="" class="">Link Name</a></li>
<li><a href="#" title="" class="">Link Name</a></li>
<li><a href="#" title="" class="">Link Name</a></li>
</ul>
In the CSS just make the unordered list: list-style: none; to get ride of bullets. Also could put in: list-image: none; esp. if you have image bullets on other lists. Then declare your colors, decoration, etc.
Also, do you need the target? It is a deprecated tag - I'm pretty sure, at least.
I'm going to paste code I wrote for you that has an optional link class which gives an orange background and white font when the link is active. I named the class 'bot' -
a.bot {
/*values I wrote down below */
}
This one is named 'bot' in case you wanted to put it on the bottom, but the class could be named anything. When you declare a color or a background color, you should also declare the other. Color and background color should always be shown when the other is shown. Background could be labeled "transparent" if you didn't want a particular color, but it should be shown as something. Here's what I came up with...
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SLPEcho</title>
<style type="text/css">
<!-- /* this is that beginning comment tag I mentioned hides css from older browsers - what I'm writing between, the asterik and slash hide from the css itself, even to those browsers who read css. you can make notes this way or temp./perman. take off a style's value */
h3 {
font-family: Geneva, Arial, Helvetica, sans-serif;
top: 0; /* no px or anything needed after zero, as it's zero everything*/
left: 15px;
}
a {
text-decoration: none;
color: black;
background: white;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 20px;
} /* to the left is the ending tag you forgot */
a:hover {
color: orange;
background: white;
text-decoration: overline;
}
a:active {
color: red;
background: white;
text-decoration: none;
}
/* Below is a class given to a link so that you can have different looks to differnt links on the same page if you'd like to have that... */
a.bot {
text-decoration: none;
color: black;
background: white;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 1.1em; /* em is a unit of width of the letter M of that font. Ems are used because they are relative in size and someone with poor sight can easily make your wording larger. Pixels don't always get larger when it's needed. */
}
a.bot:hover {
color: orange;
background: white;
text-decoration: overline;
}
a.bot:active {
color: white;
background: orange;
text-decoration: none;
}
--> /* that was the ending comment tag I mentioned */
</style>
</head>
<body>
<p>
<a href="home.html" target ="home">Home</a><br />
<a href="news.html" target ="home">News</a><br />
<a href="studentlife.html" target="home">Student Life</a><br />
<a href="features.html" target="home">Features</a><br />
<a href="sports.html" target="home">Sports</a><br />
<a href="opinions.html" target="home">Opinions</a><br />
<a href="entertainment.html" target="home">Entertainment</a><br />
<a href="advertising.html" target="home">Advertising</a><br />
<a href="contactus.html" target="home">Contact Us</a><br />
<a href="staff.html" target="home">Staff</a><br />
<a href="awards.html" target="home">Awards</a><br />
</p>
<p><b>Related Sites</b><br />
<a href="http://www.slpschools.org" target="_blank">SLP Schools</a><br />
<a href="http://www.slpschools.org/sh"target="_blank">SLPSH</a><br />
<a href= "http://ps.slpschools.org/public" target="home">Powerschool</a><br />
</p>
<!-- The 'bot' class could be a link style to put on the bottom. Just showed you a different way to have more than one link color style on a page. You also could borders around your links to make them look different.
Example:
a {
border: 1px ridge #000;
color: #000
background: #fff;
text-decoration: none;
}
Ya like? ; ) Next comes the bot link in action. -->
<p>
<a href="#" class="bot" title="">A bot Link 1</a> | <a href="#" class="bot" title="">Another bot Link 2</a> | <a href="#" class="bot" title="">Another bot Link 3</a>
</p>
<!-- notice when putting in a 'class' on links, the class name goes on each link for best results. What you are reading here, if written on a web page with these comment tags, wouldn't be seen on the page, but only in the source code. It's a nice way to make notes on your web page.... Left column starts...- and later - Left column ends... things like that. ;~)
Hope this helps you. Best of luck! -->
Not the right place
by LoriHC (Dreamweaver Team) on September 26, 2007
This whole post is off-topic, actually. Please see the site guidelines at http://www.adobe.com/communities/guidelines/usingcssadvisor.html for information on places to learn about basic CSS.
Post will be deleted shortly.
Off topic...
by Wakizashi on September 26, 2007
and you should rewrite html so that <?xml version="1.0" encoding="UTF-8"?> goes on top of everything, then DTD Deffinintion and after that you should put <html... >
That way you are having valid html and easier to work with.. not to mention that <? xml on top will send IE to quirks mode but i guess you already know that...
Sorry for offtopic, but its much easier to debug html/css issues when you are working on valid (x)html document
by BigAlUK on September 20, 2007
You need to the have the link pseudo classes in a certain order Link > Visited > Hover > Active LVHA (LoVe HAte) :)
E.g.
<style type="text/css">
p a:link {
color:#F00
}
p a:visited {
color:#0F0
}
p a:hover {
color:#FF0
}
p a:active {
color:#00F
}
</style>
Works fine. Hope this helps.