Problem modifying links within span

I am currently learning javascript/CSS and so I am trying to implement the Dynamic Java开发者_JS百科script Breadcrumbs found at: http://www.webmonkey.com/2010/02/build_dynamic_breadcrumbs_with_javascript/. The code for that is below.

What I am trying to do is modify the links that the breadcrumbs generate; I would like them to be a shade of green and have no text-decoration whenever they are not active or being hovered over. When they are being active or hovered over, I would like them to turn red and become underlined.

The breadcrumbs are being generated correctly, but it seems like the CSS is not being applied correctly. The links are underlined no matter what and are blue to start with, then purple after they are visited. It is weird because if I modify the size, weight, font-family, etc of the links that gets applied, but not the color or text-decoration. I am probably making a beginner's mistake somewhere, so thanks in advance for your time and help!

My CSS is:

.crumb{
  FONT-WEIGHT: medium;
  FONT-SIZE:medium;
  FONT-STYLE:italic;
  FONT-FAMILY:Arial;
}
.crumb:link, .crumb:visited{
  color: green;
  text-decoration: none;
}
.crumb:hover, .crumb:active: {
  color:red;
  text-decoration: underline;
}

The code for the breadcrumbs is:

var crumbsep = " > ";
var precrumb = "<span class=\"crumb\">";
var postcrumb = "</span>";
var sectionsep = "/";
var rootpath = "/"; // Use "/" for root of domain.
var rootname = "Home";

var ucfirst = 1; // if set to 1, makes "directory" default to "Directory"

var objurl = new Object;
objurl['main-default'] = 'Site Home';

// Grab the page's url and break it up into directory pieces
var pageurl = (new String(document.location));
var protocol = pageurl.substring(0, pageurl.indexOf("//") + 2);
pageurl = pageurl.replace(protocol, ""); // remove protocol from pageurl
var rooturl = pageurl.substring(0, pageurl.indexOf(rootpath) + rootpath.length);
if (rooturl.charAt(rooturl.length - 1) == "/") //remove trailing slash
{
  rooturl = rooturl.substring(0, rooturl.length - 1);
}
pageurl = pageurl.replace(rooturl, ""); // remove rooturl fro pageurl
if (pageurl.charAt(0) == '/') // remove beginning slash
{
  pageurl = pageurl.substring(1, pageurl.length);
}

var page_ar = pageurl.split(sectionsep);
var currenturl = protocol + rooturl;
var allbread = precrumb + "<a href=\"" + currenturl + "\">" + rootname + "</a>" +    
postcrumb; // start with root

for (i=0; i < page_ar.length-1; i++)
{
  var displayname = "";
  currenturl += "/" + page_ar[i];
  if (objurl[page_ar[i]])
  {
    displayname = objurl[page_ar[i]];
  }
  else
  {
    if (ucfirst == 1)
    {
      displayname = page_ar[i].charAt(0).toUpperCase() + page_ar[i].substring(1);
    }
    else
    {
      displayname = page_ar[i];
    }
   }
  allbread += crumbsep + precrumb + "<a href=\"" + currenturl + "\">" + displayname + 
    "</a>" + postcrumb;
}
document.write(allbread);

Probably not a javascript question. Firstly get the markup right, then work in generating it. The HTML result of the document.write is something like:

<span class="crumb"><a href="...">linkText</a></span>

The CSS should be something like:

.crumb a {
  font-weight: medium;
  font-size: medium;
  font-style: italic;
  font-family: arial;
}

.crumb a:link, .crumb a:visited {
  color: green;
  text-decoration: none;
}

.crumb a:hover, .crumb a:active {
  color:red;
  text-decoration: underline;
}

There was an extra colon after .crumb a:active preventing it from applying. Works now.

Incidentally, why are you doing this on the client with document.write when it would likely be far simpler to do it on the server and just send the HTML?

Your CSS styles refer to the spans, not the links. Change '.crumb' to '.crumb a' everywhere and it should work just dandy.

Good luck!

What do you get if you change the css to:

.crumb a:link, .crumb a:visited{
  color: green;
  text-decoration: none;
}
.crumb a:hover, .crumb a:active {
  color:red;
  text-decoration: underline;
}

so the pseudo class formatting is applied to the link not the span?

Extra colon after the active too.

Just about your way to write Javascript:

1. Combine variables at the top of your code
2. Use browsers inspector to run your code
3. var objurl = new Object is deprecated, you should use the literal syntax
4. document.location returns an object, not a string
5. you can make the use of JsLint to learn more more things
6. never use document.write it's better to assign the code to an existing element

regarding your code, it should be re-written to something like:

http://jsbin.com/usisix/2/edit#javascript,html,live