td als button

[js user]

Ik heb op mijn website een navigatiemenu'tje gemaakt in een tabel. Nu heb ik door de border kleuren van de cellen die ik als link wil gebruiken te wijzigen de illusie opgewekt dat de cell er lijkt uit te springen en als het ware een button wordt. Als je er op klikt en de muisknop vasthoudt, dan zou de button moeten 'ingedrukt' worden door de border-left en de border-right color te verwisselen en hetzelfde te doen met top en bottom. Als je de muisknop loslaat, dan wordt de pagina, bv "home.html" geopend in het frame 'page' en wordt de button weer normaal. Ik heb daarvoor de volgende javascript-code gebruikt:

window.onload = exec

var home;

function exec() {
home = document.getElementById("home");
home.onmousedown = ingedrukt(name);
home.onmouseup = openhome;
}

function openhome() {
open('home.html', 'page');
nietIngedrukt(home);

}

function ingedrukt(name) {
name.style.borderTopColor = "#643800";
name.style.borderBottomColor = "#D3B591";
name.style.borderLeftColor = "#643800";
name.style.borderRightColor = "#D3B591";
}

function nietIngedrukt(name) {
name.style.borderTopColor = "#D3B591";
name.style.borderBottomColor = "#643800";
name.style.borderLeftColor = "#D3B591";
name.style.borderRightColor = "#643800";
}

hier een stuk uit 'navigation.html':

td class="navlinkcell" id="home">
<p class="navlinktext">
home
</p>
</td>

en hier een stuk uit mijn css-bestand:

.navlinktext {color:#CCBB00; text-decoration: none;
font-family: arial, helvetica; font-size: 16px;
margin:0px;padding:0px;}

.navlinkcell {text-align: center; width:10%; height:25px; cursorointer;
border-width:1px; border-style: solid;
border-bottom-color:#643800; border-right-color:#643800;
border-top-color:#D3B591; border-left-color:#D3B591;
padding:0px;}



.navlinkcell:hover {background-color: #995500;}

de pseudo-class :active gebruiken zou een optie kunnen zijn, maar dat blijkt niet te werken in IE7???

hoe moet ik dit oplossen?

Vriendelijke groet