[js/css] visibility probleem in firefox

[Marc]

Het lukt mij maar niet om een div te laten zien dmv javascript onder firefox, het rare is dat hij het bij 6 divs wel doen (mijn menu-items), maar bij eentje niet. Dit is mijn code:

JavaScript:

<script language="javascript">
setTimeout ("intro()", 4000);   
setTimeout ("light(td1)", 5300);
setTimeout ("light(home)", 5300);

function light(id) {
    id.style.visibility='visible';
    id.style.background='#FFFFFF';
}
function dark(id) {

    id.style.background='#95B0FF';
}
function intro() {
    setTimeout("light(td1)", 100);
    setTimeout("dark(td1)", 190);
    setTimeout("light(td2)", 300);
    setTimeout("dark(td2)", 390);   
    setTimeout("light(td3)", 500);
    setTimeout("dark(td3)", 590);
    setTimeout("light(td4)", 700);
    setTimeout("dark(td4)", 790);
    setTimeout("light(td5)", 900);
    setTimeout("dark(td5)", 990);
    setTimeout("light(td6)", 1100);
    setTimeout("dark(td6)", 1190);
}
</script>

Dit werkt wel onder IE, maar niet onder Firefox. Nu zullen jullie ongetwijfeld zeggen dat ik document.getElementById moet gebruiken, maar wees gerust, dit heb ik ook geprobeerd:

JavaScript:

function light(id)
{
    var dest = document.getElementById(id);
    dest.style.visibility='visible';
    dest.style.background='#FFFFFF';
}

function dark(id)
{
    var dest = document.getElementById(id);
    dest.style.background='#95B0FF';
}

nu doet hij het onder geen enkele browser meer, en ik krijg de error 'dest has no properties' onder FireFox, maar naar mijn mening moet die toch echt wel properties hebben.

dit is mijn CSS code:

Cascading Stylesheet:

div#nav {
    width: 120px;
    margin: 0px;
    text-align: left;
    float: left;
    vertical-align: top;
}
div.menuitem {
    border: 1px solid black;
    background-color: #95B0FF;
    padding: 2px;
    cursor:pointer;
    text-align: center;
    margin: 5px;
    width: 100px;
    visibility: hidden;
}
div.content {
    margin-left: 20px;
    float: left;
    visibility: hidden;
    text-align: left;
}   

en dit mijn HTML code:

HTML:

<div id="nav">
        <div class="menuitem" id="td1">Home</div>
        <div class="menuitem" id="td2">Reserveren</div>
        <div class="menuitem" id="td3">Foto's</div>
        <div class="menuitem" id="td4">Geschiedenis</div>
        <div class="menuitem" id="td5">Gastenboek</div>
        <div class="menuitem" id="td6">Contact</div>
</div>
<div class="content" id="home">
    <h1>Titel!</h1>
    tekst...
</div>

Het is dit de bedoeling dat het menu item voor item verschijnt, en als het helemaal zichtbaar is, moet het eerste item (home) wit blijven en de div 'home' zichtbaar worden.

[crisp]

strings horen tussen quotes:

JavaScript:

function intro() {
    setTimeout("light('td1')", 100);
    setTimeout("dark('td1')", 190);
    setTimeout("light('td2')", 300);
    setTimeout("dark('td2')", 390);    
    setTimeout("light('td3')", 500);
    setTimeout("dark('td3')", 590);
    setTimeout("light('td4')", 700);
    setTimeout("dark('td4')", 790);
    setTimeout("light('td5')", 900);
    setTimeout("dark('td5')", 990);
    setTimeout("light('td6')", 1100);
    setTimeout("dark('td6')", 1190);
}

dit ism getElementById

[Marc]

Bedankt! het werkt nu inderdaad.
Ik dacht op het begin ook al wel zoiets, alleen zat ik een beetje in de knoop met het feit dat het argument van setTimeout ook al tussen (dubbele) haakjes stond.
Toen ik het de eerste keer zonder haakjes probeerde deed hij het wel dus ik dacht dat het zo hoorde, maargoed nu weet ik het!

nogmaals dank