CODEWITHSUNDEEP
javascripthtmlcssinternet-explorer
Simon Carlson
Simon Carlson

Reputation: 1989

Changing link colors doesnt work in IE

I have this JavaScript code that sets a background color to the latest pressed link:

<script>
function changeClass(Index) {
    var ids = new Array(
        "null", "homenav", "coffeenav", "sidenav", "standnav",
        "dinnernav", "stoolsnav", "pedestalsnav",
        "galleriesnav", "pressnav", "factsnav", "contactnav"
    );
    var color = new Array(
        "null", "#c9a900", "#f32837", "#0085cf",
        "#00aa86", "#c99900", "c42695", "#617f90",
        "#4814a9","#71a28a","#ac27a9","#998f86"
    );
    var i = 1;
    var length = ids.length;
    while (i < length) {
        document.getElementById(ids[i]).style.backgroundColor = '#FFF';
        document.getElementById(ids[i]).setAttribute("class","blacklink");
        document.getElementById(ids[Index]).style.backgroundColor =color[Index];
        document.getElementById(ids[Index]).setAttribute("class","whitelink");
        i++;
    }
}
</script>

And I also have a table that looks like this:

<table width="100%" border="0" align="left" cellpadding="3" cellspacing="3" class="menyrad">
 <tr valign="middle" align="center">
  <td width="10%" id="homenav">
    <a href="framsida_test.html" onClick="changeClass(1)">Furniture home</a>
 </td>
 <td width="10%" id="coffeenav">
  <a href="coffee.html" onClick="changeClass(2)">Coffee tables</a>
 </td>
 <td width="9%" id="sidenav">
  <a href="side.html" onClick="changeClass(3)">Side tables</a>
 </td>
 <td width="9%" id="standnav">
  <a href="stand.html" onClick="changeClass(4)">Stand tables</a>
 </td>
 <td width="8%" id="dinnernav">
  <a href="dinner.html" onClick="changeClass(5)">Dinner tables</a>
 </td>
 <td width="6%" id="stoolsnav">
  <a href="stools.html" onClick="changeClass(6)">Stools</a>
 </td>
 <td width="8%" id="pedestalsnav">
  <a href="pedestals.html" onClick="changeClass(7)">Pedestals</a>
 </td>
 <td width="8%" id="galleriesnav">
  <a href="galleries.html" onClick="changeClass(8)">Galleries</a>
 </td>
 <td width="6%" id="pressnav">
  <a href="press.html" onClick="changeClass(9)">Press</a>
 </td>
 <td width="6%" id="factsnav">
  <a href="facts.html" onClick="changeClass(10)">Facts</a>
 </td>
 <td width="8%" id="contactnav">
  <a href="contact.php" onClick="changeClass(11)">Contact</a>
 </td>

The CSS for class="menyrad", class="whitelink" and class ="blacklink" looks like this:

.menyrad td {
  font-family:Verdana, Geneva, sans-serif;
  font-size:10px;
}

.whitelink {
  color:#fff;
  outline:0;
  font-weight:bold;
}

.blacklink a {
  color:#000;
  outline:0;
}

This works fine in all browsers BUT Internet Explorer (I checked with IE9, doesn't seem to work in any version though). When I press any link the link gets a block of color around it, the text changes to bold white and there is no dotted outline around the pressed link. In IE the colored block shows up, but the text is black and not bold, and there is an outline.

What can I do?

Upvotes: 2

Views: 190

Answers (2)

Quentin
Quentin

Reputation: 943547

Old versions of Internet Explorer (and modern versions when they are in Quirks/Compatibility modes) have a broken implementation of setAttribute. Don't use it. Set the associated DOM property instead.

element.className = "foo";

Upvotes: 3

keaukraine
keaukraine

Reputation: 5364

Try to use the following CSS:

.blacklink a,
.blacklink a:link,
.blacklink a:visited
{
    color:#000;
    outline:0;
}

Upvotes: 0

Related Questions