a:active no me funciona

[Jarkaos]

Hola
he creado un menu en donde cada link esta compuesto de 2 imagenes, una con el nombre del link y otra con el nombre y una linea semitransparente como subrayado.

La idea es que en a:hover y a:active se muestra la imagen con el subrayado, pero lo que logro es que la imagen se muestre en el a:hover pero no me funciona en el a:active.

Este es el odigo html:

Código HTML:

<div class="start">
	<a class="startLink" href="index.html"></a>
</div> 

y este es el css:

Código HTML:

.start {
	float:left;
}

.start a{
	width: 29px;
	height: 21px;
	display: block;
}

a.startLink:link {
	background: url(../img/menu/start.gif);
	width: 29px;
	height: 21px;
	display: block;
	}
a.startLink:visited {
	background: url(../img/menu/start.gif);
	width: 29px;
	height: 21px;
	}

a.startLink:hover {
	background: url(../img/menu/startact.gif);
	width: 29px;
	height: 21px;
}
	
a.startLink:active {
	background: url(../img/menu/startact.gif);
	width: 29px;
	height: 21px;
}

Preguntando me dijieron que no se podia hacer con css si no que con javascript, que tan cierto es eso?

Gracias

[kaninox]

ponelo de primero ;)

.start {
float:left;
}



.start a{
width: 29px;
height: 21px;
display: block;
}

a.startLink:active {
background: url(../img/menu/startact.gif);
width: 29px;
height: 21px;
}

a.startLink:link {
background: url(../img/menu/start.gif);
width: 29px;
height: 21px;
display: block;
}
a.startLink:visited {
background: url(../img/menu/start.gif);
width: 29px;
height: 21px;
}

a.startLink:hover {
background: url(../img/menu/startact.gif);
width: 29px;
height: 21px;
}

la verdad es que a mi me a pasado que a veces lo pongo en medio al final o en medio y despues me va :P lo se algo raro