rangana
250+ Club
Joined: 27 Feb 2008
Posts: 271
Location: Cebu City Philippines
|
 Posted: Wed Apr 23, 2008 6:04 am Post subject: Active Link |
 |
|
I have observed that IE and FF render differently when it comes to a lot of things...one of it is the active pseudo elements 
I'll be giving an example of a script wherein active link will be identical on all browsers 
We are aware of the LoVeHate of CSS with regards to anchor (a)
| Code: |
a:link{color:red;}
a:visited{color:red;}
a:hover{color:blue;}
a:active{color:black;}
|
..When the code above is executed, a:active seems not to work on IE
...What about a fix?...Well, let's take into consideration a client-side script to resolve this:
| Code: |
<script type="text/javascript">
window.onload=function()
{
var accept=document.getElementById('nav').getElementsByTagName('a');
for(var start=0;start<accept.length;start++)
{
accept[start].onclick=function()
{
for(var start=0;start<accept.length;start++)
{
accept[start].style.background='#fc0';
{
this.style.background='#9c0';
}
}
}
}
}
</script>
|
It's full implementation is seen using this code:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#nav a {
color:#000;
text-decoration:none;
display:block;
width:100px;
text-align:center;
background:#fc0;
line-height:30px;
margin:1px;
border-bottom:2px solid #2d2d2d;
border-right:2px solid #2d2d2d;
}
#nav a:hover
{
border-top:2px solid #2d2d2d;
border-left:2px solid #2d2d2d;
border-bottom:0px;
border-right:0px;
}
ul
{
list-style-type:none;
font-family:Tahoma;
font-size:10pt;
margin-top:10px;
}
#wrap{background:#eee;width:180px;margin:10px auto;border:3px double #2d2d2d;}
</style>
<script type="text/javascript">
window.onload=function()
{
var accept=document.getElementById('nav').getElementsByTagName('a');
for(var start=0;start<accept.length;start++)
{
accept[start].onclick=function()
{
for(var start=0;start<accept.length;start++)
{
accept[start].style.background='#fc0';
{
this.style.background='#9c0';
}
}
}
}
}
</script>
</head>
<body>
<div id="wrap">
<ul id="nav">
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul>
</div>
</body>
</html>
|
|
|
