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

[techno_race]

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.

[techno_race]

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.



<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.

[techno_race]

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