Foros del Web » Creando para Internet » CSS »

Tabla q se mueve al mostrar bordes de celda

Estas en el tema de Tabla q se mueve al mostrar bordes de celda en el foro de CSS en Foros del Web. 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; ...
  #1 (permalink)  
Antiguo 14/03/2012, 09:21
 
Fecha de Ingreso: marzo-2012
Mensajes: 30
Antigüedad: 12 años
Puntos: 2
Tabla q se mueve al mostrar bordes de celda

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.
  #2 (permalink)  
Antiguo 14/03/2012, 09:27
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años
Puntos: 192
Respuesta: Tabla q se mueve al mostrar bordes de celda

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

Código CSS:
Ver original
  1. .Columna1
  2. {
  3. height: 2em;
  4. border-bottom: 1px transparent solid;
  5. border-top: 1px transparent solid;
  6. }

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.
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 14/03/2012, 09:31
 
Fecha de Ingreso: marzo-2012
Mensajes: 30
Antigüedad: 12 años
Puntos: 2
Respuesta: Tabla q se mueve al mostrar bordes de celda

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.
  #4 (permalink)  
Antiguo 14/03/2012, 10:35
Avatar de DanielRGB  
Fecha de Ingreso: marzo-2012
Mensajes: 117
Antigüedad: 12 años
Puntos: 18
Respuesta: Tabla q se mueve al mostrar bordes de celda

yo hago trampas usando margin negativos.

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

"mentiende?"
__________________
Yo recomiendo para el hosting - www.cyberneticos.com

"Me encanta cuando los planes salen bien"
Hannibal Smith
  #5 (permalink)  
Antiguo 15/03/2012, 03:35
 
Fecha de Ingreso: marzo-2012
Mensajes: 30
Antigüedad: 12 años
Puntos: 2
Respuesta: Tabla q se mueve al mostrar bordes de celda

Claro, es otra opción, jejejejeje.

Me la apunto!!!!

Gracias.

Etiquetas: bordes, celda, explorer, firefox, hover, html, mueve, tabla, tamaño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:05.