Mi tabla css no se visualiza bien en internet explorer

[pucel4n0]

Hola buenas tardes. Hoy me ha dado por empezar a aprender algo de css, para mejorar mis futuras páginas web, con resultado bastante satisfactorio hasta ahora.

El problema es que la tabla que he hecho no se por qué no me resalta la fila ocupada por el cursor en internet explorer, pero sí lo hace en firefox.

¿Alguien tiene alguna idea de por qué puede ser?

Y ya de paso, si alguien me dice como hacer lo siguiente le estaria muy agradecido:
Actualmente si pongo un enlace en una de las celdas del menu, solo se me abre al pinchar el texto, sin embargo hay muchas webs que se abren al pinchar cualquier parte de la celda del menu, aunque sea el fondo.

No me deja copiar el fuente porque soy nuevo, asi que os pongo la pagina donde lo he subido para que podais ver el fuente.
Tampoco me deja poner la url asi que tendreis que copiarla... disculpad las molestias.

cdtiernogalvan.webcindario.com/xxxx.html

[talmente]

No resalta la fila ocupada por el cursor en internet explorer, pero sí lo hace en firefox.

Le tienes que dar un tamaño a <a>

.ensayo td a {
background-color: #999933;
display: block;
color: #FFFFFF;
margin: 0px;
border-style: none;
height: 25px;
width: 150px;

.ensayo td a:hover {
background-color: #000099;

Con eso se te resuelven los dos problemas que planteas, IE el :hover lo entiende a su manera y se ve que dentro de una tabla tienes que dar un tamaño a la etiqueta <a>.

También es importante poner en este caso la propiedad display: block;.

Te faltan a:active, a:visited y a:focus, son importantes.

Un paso de gigantes seria utilizar una lista para hacer los menús.

Esto es en resumidas cuentas lo mismo que lo de arriba(faltan muchas cosas):

li a {
background-color: #999933;
display: block;
color: #FFFFFF;
margin: 0px;
border-style: none;
height: 25px;
width: 150px;
}
li a:hover {
background-color: #000099;

}

HTML
<ul>
<li><a href="#">hola</a></li>
<li><a href="#">adios</a></li>
</ul>

[pucel4n0]

Muchas gracias!!!

Me has solucionado el problema al 95%.
En Firefox perfecto. En internet explorer se me resalta bien, salvo porque la banda no ocupa por completo la celda y deja un pequeño margen de uno o dos pixeles; pero bueno es algo asumible

muchas gracias de nuevo

[talmente]

Ese margen se puede solucionar, pon el codigo.

[pucel4n0]

El código de estilo es el siguiente:

<style type="text/css">
table.ensayo{
border-collapse: collapse;
border: 3px solid #999999;
color: #CCCCCC;
background-color: #000066;
text-indent: 4px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: bolder;
font-variant: normal;
}
table.ensayo td, th {
border: 1px solid #999999;
padding: 0.4em;
color: #CCCCCC;
}

table.ensayo thead th, tfoot th {
font: bold 11px verdana, arial, helvetica, sans-serif;
border: 1px solid #999999;
text-align: left;
background: #4591AD;
color: #FFFFFF;
padding-top:3px;
}
table.ensayo tbody td a {
background: transparent;
text-decoration: none;
color: #FFFFFF;
}
.ensayo td a {
background:#999999;
display: block;
color: #FFFFFF;
margin: 0px;
border-style: none;
height: 14px;
width: 150px;
}
.ensayo td a:hover {
background-color:#990000;
}
table.ensayo tbody td a:hover {
color: #FFFF00;
}
tbody th, tbody td {
vertical-align: top;
text-align: left;
}
tbody tr:hover {
border: 1px solid #999999;
background-color: #990000;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFF00;
}

</style>

[talmente]

Pra esa tabla lo unico que necesitas es esto(he limpiado un poco tu codgo):

Código:

table.ensayo{
	border-collapse: collapse;
	border: 3px solid #999999;
	color: #CCCCCC;
	text-indent: 4px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: bolder;
	font-variant: normal;
}
table.ensayo td, th { color: #CCCCCC; }

table.ensayo thead th, tfoot th {
	font: bold 11px verdana, arial, helvetica, sans-serif;
	text-align: left;
	background: #4591AD;
	color: #FFFFFF;
	padding-top:3px;
}

.ensayo td a {
	background:#999999;
	display: block;
	color: #FFFFFF;
	margin: 0px;
	border-style: none;
	height: 20px;
	width: 150px;
}
.ensayo td a:hover {
background-color:#990000;
}
tbody th, tbody td {
vertical-align: top;
text-align: left;
}


</style>