Descuadre en navegadores

En el trabajo hay un sitio web basado en una plantilla que contiene unas tablas. El asunto es que al insertar unas imágenes y encuadrar las celdas, cuando lo visualizarlo en Firefox todo va bien, pero resulta que IE la tabla de la derecha se sube o se baja quedando descuadrado. Si lo cuadro en IE se me sube o baja en Firefox...
Podrías darme una luz sobre este asunto.

1 Respuesta

Respuesta
1
Me sería de ayuda ver el código para serte más concreto. Las tablas para distribuir el espacio es algo que está en desuso y algunos navegadores por ajustarse al estándar y otros por saltárselo a la torera acaban dificultando el diseño.
Si me pegas el código de la tabla lo reviso y te doy la solución.
En general en las tablas para evitar problemas se suele hacer una fila o columna según sea el caso con una imagen gif que tenga de ancho o de alto la longitud que necesitemos.
Así si quiero que esa tabla tenga dos filas y una columna y quiero que independientemente de la imagen, la parte superior ocupe 300px y la inferior 400px creo una imagen gif de una linea vertical transparente:
- Creo una nueva columna con sus dos filas dentro de esa misma tabla
- En la fila superior coloco la imagen con un grosor de 0px o de 1px y una altura de 300px
- En la fila inferior coloco la imagen con un grosor de 0px o de 1px y una altura de 400px
Así la tabla se estabiliza en esos valores la visualices con el navegador que la visualices y esa columna adicional no es visible ni ocupa espacio. El problema es que algunos admiten porcentajes, otros no, unos respetan el tamaño que les asignas, otros solo muestran las celdas del tamaño del contenido que insertas, etc. Así que la solución pasa por poner "parches" como ese.
Kike
Gracias Kike.
Te voy a aclarar, ese sitio está hecho con una plantilla previamente hecha, entonces lo que hice fue modificarla con Dreamweaver CS4, puedes ver el sitio en http://digeca.minae.go.cr
El asunto es que a la derecha viene una sección donde se van poniendo noticias y obviamente eso cambia constantemente, a veces hay dos noticias, a veces cuatro, entonces al agregar o quitar filas, el alto de la tabla varía y ahí es donde se descuadra la cosa!
En realidad no tengo mucha experiencia en Dreamweaver, no sé si esa solución que me diste sirve o si se te ocurre otra cosa.
Gracias
No entiendo muy bien a que te refieres con que se descuadra, o que sube y baja (¿en relación a qué parte dela página?).
Si te das cuenta, ahora mismo en Firefox ves en la ultima celda una separación entre las dos barras que la delimitan (en el hueco sin noticia) y en IE no ves ese espacio, ambas líneas están juntas.
Es algo que me refería, si no hay contenido IE no muestra el ancho o alto que indicas si no hay contenido.
Supongo que solo pones 3 o 4 noticias en esa tabla. Distribuye entonces el espacio con la línea invisible que te comento. Así dejas las tres o 4 casillas del mismo tamaño y se verá igual en ambos navegadores. Pero te vas a encontrar con el problema de la alineación, si son del mismo tamaño lo lógico sería centrarlas verticalmente, pero esa opción no es aceptada ya por IE que tiene una alineación vertical "top". Ese problema en IE se puede solucionar con CSS, malamente, no de forma elegante y directa.
Así, para que se muestre de igual manera y si no es mucho el inconveniente, yo iría cambiando el tamaño de la línea gif que insertes para acomodarlo al tamaño del texto.
Te dejo un ejemplo de como sería la tabla, claro que le faltan los estilos, está a pelo y con números a bulto en la altura de la línea:
<table width="200" border="0">
<tr>
<td width="0"><img src="barra.gif" width="0" height="100" /></td>
<td width="176">Imagen aleatoria</td>
</tr>
<tr>
<td width="0"><img src="barra.gif" alt="" width="0" height="70" /></td>
<td>Texto de la noticia numero 1 de la tabla</td>
</tr>
<tr>
<td width="0"><img src="barra.gif" alt="" width="0" height="80" /></td>
<td>Texto de la noticia numero 2 de la tabla</td>
</tr>
<tr>
<td width="0"><img src="barra.gif" alt="" width="0" height="60" /></td>
<td>Texto de la noticia numero 3 de la tabla</td>
</tr>
<tr>
<td width="0"><img src="barra.gif" alt="" width="0" height="130" /></td>
<td>Logo de PNUD</td>
</tr>
</table>
Prueba a ver si eso lo arregla y si no especifícame más el problema, o ponlo en la página con un ejemplo más claro, actualmente casi se ven idénticos en firefox e IE y no he podido ver si el problema es otro.
Kike
Excelente Kike, ya me diste una luz de cómo arreglarlo. El asunto es que hay dos tablas, una con las noticias y otra con las imágenes abajo, entonces cuando las noticias cambian las imágenes no se ven en la misma posición en los navegadores, generalmente en Firefox las imágenes queda un poco más arriba.
Pero ya con la ayuda que me diste puedo travesear un poco y ver cómo lo arreglo.
Muchas gracias por tu tiempo.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas