Tabla q se mueve al mostrar bordes de celda

[LagoGZ]

Buenas tardes y saludos a todos.

Aprovecho para presentarme, jejejeje.

Resulta q tengo una tabla tal como sigue:
--------------------------CSS----------------------------
.Taboa1
{
text-align: center;
cursor: pointer;
width: 12em;
}

.Taboa1
{
height: 18em;
}

.Columna1
{
height: 2em;
}

.Columna1:hover
{
border-bottom: 1px #FFF solid;
border-top: 1px #FFF solid;
height: 2em;
}

------------------------HTML-------------------------
<table class="Taboa1">
<tr><td class="Columna1">xxxxx</td></tr>
<tr><td class="Columna1">xxxxx</td></tr>
</table>

Cuando la cargo en Mozilla Firefox, se muestran los bordes correctamente sin desplazar ni tabla ni celdas, pero en Internet Explorer 8 me desplaza las celdas inferiores, como si al mostrar los bordes aumentase el tamaño de la celda actual.

He probado mil cosas y no me ha funcionado ninguna.

Alguna idea?

Un saludo.

[Naahuel]

Pues de hecho si aumenta de tamaño. Intentá esto:

Código CSS:

.Columna1
{
height: 2em;
border-bottom: 1px transparent solid;
border-top: 1px transparent solid;
}
 

Es decir, aplicale un borde transparente inicialmente. Luego en :hover, sólo estaría cambiando de color por lo que no variaría su tamaño.

[LagoGZ]

Buenas tardes.

Tanto en Firefox como en IE cambia el tamaño, eso es seguro. Lo q pasa es q en Firefox al especificar alto de celdas se me arregla el problema (ya q si no lo especificas ocurre lo mismo q en IE), pero en IE sigue comportándose de forma incorrecta.

He probado lo q me comentas y funcionó perfectamente. Muchísimas gracias.

Estoy dándole duro al diseño con CSS y creo q ya he encontrado mi apoyo, jejejejejeje.

Un saludo y de nuevo gracias.

[DanielRGB]

yo hago trampas usando margin negativos.

Si por ejemplo es border-left: 5px solid #000; en hover aplico: margin-left: -5px;

"mentiende?"

[LagoGZ]

Claro, es otra opción, jejejejeje.

Me la apunto!!!!

Gracias.