La idea es la siguiente:
mediante un clic en un enlace escribir en una capa - que esta debajo de ese enlace - mediante javascript el contenido que sea, eso no es problema...
el problema viene cuando la capa que esta debajo del enlace se redimensiona, porque evidentemente cambia de tamaño con el nuevo contenido...
debajo de esa capa hay mas capas que tienen que moverse hacia arriba o hacia abajo cuando la capa de arriba es escrita...
es algo asi como el panel izquierdo de un administrador de ficheros (explorador de windows, nautilus, konqueror), el enlace es una carpeta, el contenido de la carpeta enlace son las carpetas hijas de la carpeta enlace, y las capas que estan debajo de la carpeta enlace son las carpetas hermanas de la carpeta enlace, que a su vez son tambien carpetas enlaces.
Con el texto y las imagenes como contenido de la capa no hay problemas, las capa contenedora se redimensiona y las que estan debajo se mueven, el problema es cuando el contenido de la capa es una tabla, la capa contenedora no se redimensiona, la tabla desborda la capa contenedora y las capas que estan debajo comienzan a fluir a la derecha de la capa que contiene la tabla. El problema ocurre solamente con Firefox, Internet Explorer (TM;) se porta bien en ese sentido.
cito el apartado 10.6.3 de la especifición css 2
"10.6.3 Elementos no reemplazados en flujo normal, a nivel de bloque y elementos reemplazados, flotantes Si 'top', 'bottom', 'margin-top', or 'margin-bottom' es 'auto', su valor computado es 0. Si 'height' es 'auto', la altura depende si el elemento tiene algún hijo a nivel de bloque y si tiene relleno o bordes. Si sólo tiene hijos a nivel de línea, la altura es la distancia desde la parte superior de la caja de línea que se encuentra más arriba hasta la base de la caja de línea que se encuentra más abajo. Si tiene hijos a nivel de bloque, es la distancia desde el límite del borde superior de la caja a nivel de bloque hija que se halla más arriba, hasta el límite del borde inferior de la caja a nivel de bloque hija que se halla más abajo. Sin embargo, si el elemento tiene un relleno superior distinto a cero y/o un borde superior, entonces el contenido comienza en el límite del margen superior de la hija ubicada más arriba. De manera similar, si el elemento tiene un relleno inferior distinto a cero y/o un borde inferior, entonces el contenido termina en el límite del margen inferior de la hija ubicada más abajo. Solamente los hijos en el flujo normal son tomados en cuenta (es decir, las cajas flotantes y las cajas posicionadas absolutamente son ignoradas, y las cajas posicionadas relativamente son consideradas sin sus desplazamientos). Observe que la caja hija puede ser una caja anónima."
la capa contenedora tiene height:auto; y las tablas display:block; ninguna es flotante ni posicionada absolutamente, es decir son elementos no reemplazados en flujo normal a nivel de bloque.
Las capas con bordes verdes son las capas en las que se escribe el contenido y que tendrian que redimensionarse con el nuevo contenido.
Las pruebas son con Firefox 1.5, e IE 6
Imagen 1:
h ttp://img24.imageshack.us/img24/412/imagen11ac.jpg
En Firefox, sin haber escrito ningun contenido en ninguna de las capas, IE lo muestra igual que Firefox.
Imagen 2:
h ttp://img24.imageshack.us/img24/3835/imagen28jl.jpg
En Firefox, se ha pulsado en el primer enlace y se ha escrito la capa contenedora, esta se ha redimensionado, IE lo muestra igual que Firefox.
Imagen 3:
h ttp://img24.imageshack.us/img24/1522/imagen39lg.jpg
En Firefox, se ha pulsado en el segundo enlace y se ha escrito la capa contenedora, esta no se ha redimensionado y la tabla se desborda, los enlaces comienzan a fluir a la derecha de la tabla.
Imagen 4:
h ttp://img24.imageshack.us/img24/5633/imagen42mj.jpg
En IE lo mismo que en Imagen 3, la capa se redimensiona.
Imagen 5:
h ttp://img24.imageshack.us/img24/760/imagen50oh.jpg
En Firefox, se ha pulsado en el tercer enlace y se ha escrito la capa contenedora, esta no se ha redimensionado, la tabla se desborda y fluye a la derecha de la tabla anterior.
Imagen 6:
h ttp://img24.imageshack.us/img24/4289/imagen60ua.jpg
En IE lo mismo que en Imagen 5, todo ok.
Agradezco cualquier idea
Joaquin
