CSS and Javascript – Not Working 100%

Hi,

I’ve written a script to highlight the current page in the navigation by comparing the page location and link, and then using a background color and left border color to highlight the current page in the navigation.

My problem though, is that although the current page is highlighted by changing the background color, the border color doesn’t change for some reason. This tells me that the js is ok, but there must be a problem with the css.

Here’s the js code:

[code]
function selectVisited()
{
var nav = document.getElementById(‘navigation’);
var links = nav.getElementsByTagName(‘a’);

for (var i=0; i<links.length; i++)
{
if (links[i].href == location.href)
{
links[i].className = “current”; i<links.length;
}
}
}
[/code]

The function is called onLoad in the body tag.

Here’s the css:

[code]
[color=red].current[/color] {border-left: 3px solid #A0BAB6; background: #ECECEC; color: #968464; display: block}
[/code]

Note the default style for the links in the navigation bar is to have a 3px solid gray left border. On hover that left border changes to blue and the background color is set to pale gray. When it’s the selected page, that left border is supposed to be blue and a pale gray background color (just like when you hover over one of the links). My problem is that the background color changes, but the border color doesn’t.

Can anyone see a problem that I’m not seeing?

Thanks a bunch!

[b]Edit: Mods, please remove this post. I think it’s probably better suited to the CSS forum, where I’ve also posted it.[/b]

Also in #JavaScript _↴