The right side of my page has become a link. WHY??

http://wooftalk.net/fmnas/

This used to work, but now it doesn't.

On the right side of the page, the heading "Navigation" and the "HEY THERE!!!" below it (that used to be an accordion panel), as well as the "Home" title on the left, all now link to /George URL, which seems to be automatically generated by the fade in/out script; it comes from the string pets and is put into cat1[4] and cat2[4].

This probably has something to do with the CSS's absolute positioning of the pet fader, but undoing all the changes I've made to that doesn't help.

I've put this under HTML because I don't know what the problem is. Feel free to move it to JavaScript or CSS if you like.

I have narrowed this down to a JavaScript problem, as removing the script does correct the problem. The question now is what is wrong with the script to make this happen.

HTML Code:

---

<script type="text/javascript">
var pets = "<? echo include 'adoptable.txt'; ?>"; //load pets
pets = pets.split('^^'); //make machine-readable
var dogs = new Array(); //create blank arrays to separate species
var cats = new Array();
var x = 0; //increment for loop
while (x < pets.length) { //loop to separate species into above arrays
        if (pets[x].indexOf('dog') == 0) { //dogs
                dogs[dogs.length] = pets[x];
        }
        else if (pets[x].indexOf('cat') == 0) { //cats
                cats[cats.length] = pets[x];
        }
        x++; //increment
}
x = 0; //reset
var dog1; //blank variables for randomized pets
var dog2;
var cat1;
var cat2;
function randomize(){ //randomizer function
  dog1 = dogs[Math.floor(Math.random()*dogs.length)].split('^'); //random dogs
  dog2 = dogs[Math.floor(Math.random()*dogs.length)].split('^');
  cat1 = cats[Math.floor(Math.random()*cats.length)].split('^'); //random cats
  cat2 = cats[Math.floor(Math.random()*cats.length)].split('^');
}
randomize(); //randomize
if (dogs[0]==dogs[1]||cats[0]==cats[1]){
        randomize(); //re-randomize if same
}
var currentopacity = [1,0,0,0];

function fade(e1,e2){ //fade between e1 and e2
    if (currentopacity[e1] >0) {
        currentopacity[e1] -= 0.005;
        currentopacity[e2] += 0.005;
        document.getElementById('fade'+e1).style.opacity=currentopacity[e1];
        document.getElementById('fade'+e1).style.zIndex='2';
        document.getElementById('fade'+e2).style.opacity=currentopacity[e2];
        document.getElementById('fade'+e2).style.zIndex='3';
    window.setTimeout(function(){ fade(e1,e2); },10);
    }
    else {
        currentopacity[e1] = 0;
        currentopacity[e2] = 1;
    }
}
function startfade() { //start fading.
    window.setTimeout(function(){ fade(0,1); },5000);
    window.setTimeout(function(){ fade(1,2); },10000);
    window.setTimeout(function(){ fade(2,3); },15000);
    window.setTimeout(function(){ fade(3,0); },20000);
    window.setTimeout(function(){ startfade(2,3); },20000);
}
</script>

---

Also, increasing the z-index of the affected elements doesn't help.

Figured it out! Something ate my </a> tags, and I ended up with all my absolute divs in the same link.