Forum Moderators: not2easy
I have a navigation menu at the top of the site I'm currently working on made up of links inside list items. I want to set it up so that on each page, the link to its appropriate navigation section appears as another color.
The CSS snippet is:
#nav li a:link, #nav li a:visited{
color:#4d4d4d;
text-decoration:none;
}
#nav li a:hover, #nav li a:active, #nav li a.on{
color:#f78e06;
text-decoration:none;
}
And the code applied to the links is (for example):
<li><a href="projects.php" class="on">Projects</a></li>
This works fine in Firefox, but IE doesn't show the link as a different color. I tried changing the 'on' class to an 'on' ID so that the rule became #nav li a#on, and <a href="blah" id="on"> which fixed it in IE but broke it in Firefox..so that must be wrong!
I also tried applying the 'on' class to a plain text list item and it worked fine in both browsers, so it must be to do with my links.
Does anyone know how I can get this to work?
This is a snippet from one of my list navigations.
This works in IE FF MO SAFARI OPERA NS, it may work in others browsers but i have tested in any other than the ones listed.
[snip]
If you have any further problems look at their site.
<div id="navi">
<ul>
<li id="navi_on"><a href="index.html" title="Home">Home</a></li>
<li><a href="#" title="My Life">My Life</a></li>
<li><a href="#" title="My Setcard">My Setcard</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
</div>
And the CSS
#navi{
position:relative;
float:left;
font-size:12px;
color:#525C54;
}
#navi ul{
list-style-type:none;
margin:0;
padding:0;
}
#navi ul li{
position:relative;
float:left;
display:block;
width:93px;
height:17px;
text-align:right;
padding:58px 7px 0 0;
margin-right:20px;
background-image: url("../images/layout/navibg.gif");
background-repeat:repeat-x;
}
#navi a, #navi_on a{
font-size:13px;
font-weight:bold;
font-family:verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
}
#navi a:link, #navi a:visited, #navi #navi_on a, #navi a:hover{
text-decoration:none;
}
#navi a:link, #navi a:visited{
color:#F88E01;
}
#navi #navi_on a, #navi a:hover{
color:#660000;
}
[edited by: createErrorMsg at 2:30 am (utc) on Aug. 26, 2005]
[edit reason] no urls, please. [/edit]
It's working ok for me in Firefox, Opera, IE. Might you have an error that you're missing?
(I jiggered up the color a bit to better see what was happening.)
<head>
<style>
#nav li a:link, #nav li a:visited {
/*color: #4d4d4d;*/ text-decoration: none; color: green;
}
#nav li a:hover, #nav li a:active, #nav li a.on {
/*color: #f78e06;*/ text-decoration: none; color: red;
}
#
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href="projects.php" class="on">
Projects
</a>
</li>
<li>
<a href="projects.php">
Projects
</a>
</li>
<li>
<a href="projects.php" class="on">
Projects
</a>
</li>
</ul>
</div>
</body>
If you click that "on" link - it will turn green in IE because it will use your #nav li a:visited {
