Forum : a:active not working
Brief description about Online courses   join in Online courses
Home News Viewpoint
Travel Entertainment Auto Gadgets & Electronics Sports Lifestyle Food
Rankings Whitepapers Blogs Conferences About Us
View Bikash Kumar Singh 's Profile

a:active not working

the pseudo class a:active doesnot work as expected when I use the doctype declaration in my html file.I am trying to set the active link to blue background but as soon as i remove the mouse press it comes back to its original color(red). hover and visited properties work fine. Is there any logic behind this or it is a bug. Please try the code below and you can see whats hapenning

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
a{display:block;background-color:red;}
a:hover{display:block;background-color:yellow;}
a:active{display:block;background-color:blue;}
li{width:100px;float:left;list-style-type:none;margin-right:10px;border:2px solid;}
</style>
</head>
<body>
<ul>
<li><a href="#">first link</a></li>
<li><a href="#">second link</a></li>
<li><a href="#">third link</a></li>
<li><a href="#">fourth link</a></li>
</ul>
</body>
</html>
Asked by Bikash Kumar Singh | Sep 18, 2009 |  Reply now
Replies (1)
View teacher siliconindia 's Profile
Hi Bikash,

Paste the following code, it will work

<html>
<head>
<style type="text/css">
#homebutton ul{
font-size:18px;
font-family: Arial, Helvetica, sans-serif;
margin:0px; text-align:center;
padding:0px;
color: #FFFFFF;
}
#homebutton ul li{
list-style-type:none;
display:block;
width:240px;
height:73px;
font-size:18px;
font-family: Arial, Helvetica, sans-serif;
margin:0px;
text-align:center;
padding:0px;
color: #FFFFFF;
margin-bottom:5px; }
#homebutton ul li a{
list-style-type:none;
display:block;
width:240px;
height:45px;
font-size:18px;
background-color:#666666;
font-family: Arial, Helvetica, sans-serif;
margin:0px; padding:0px;
color: #FFFFFF;
margin-bottom:5px;
padding-top:25px;
text-decoration:none;
}

#homebutton ul li a:hover{
list-style-type:none;
display:block;
width:240px; height:45px;
font-size:18px;
background-color: #29b7cd;
font-family: Arial, Helvetica, sans-serif;
margin:0px; text-align:center;
padding:0px; color: #FFFFFF;
margin-bottom:5px;
padding-top:25px;
text-decoration:none;
}

#homebutton ul li #active{
list-style-type:none;
display:block;
width:240px;
height:45px;
font-size:18px;
background-color: #29b7cd;
font-family: Arial, Helvetica, sans-serif;
margin:0px;
text-align:center;
padding:0px;
color: #FFFFFF;
margin-bottom:5px;
padding-top:25px;
text-decoration:none;}
</style>
</head>
<body>
<div id="homebutton">
<ul>
<li><a href="#" id="active" >first link</a></li>
<li><a href="#">second link</a></li>
<li><a href="#">third link</a></li>
<li><a href="#" >fourth link</a></li>
</ul>
</div>
</body>
</html>
Sep 22, 2009

Forum By Category