Estoy cambiando una página que tenía con tablas al sistema de capas. El problema es que en Internet Explorer (y solo en Internet Explorer) algunas capas desaparecen al azar. Unas veces desaparecen unas y otras veces otras, pero sin ninguna relación aparente.
Código CSS
Código HTML:
/* NOTICIAS */
.n_cont {position:relative; left:0px; top:0px; width:384px; z-index:1}
/* Bordes */
.n_b_izq, .n_b_der {position:absolute; top:0px; height:100%; z-index:2; background-color:#cccccc}
.n_b_izq {left:6px; width:8px}
.n_b_der {right:0px; width:7px}
/* Esquinas */
.n_e_izqtop, .n_e_dertop {position:absolute; top:0px; height:36px; z-index:5}
.n_e_izqtop {left:0px; width:23px}
.n_e_dertop {right:0px; width:18px}
/* Bloque superior */
.n_subcont_1 {position:relative; left:0px; top:0px; width:100%; z-index:2}
/* Bloque superior - Seccion Categoria y Fecha */
.n_subcont_1_1 {position:absolute; left:0px; top:0px; width:100%; height:36px; z-index:2}
.n_categoria, .n_fecha {position:absolute; top:9px; z-index:5; font-size: 7pt}
.n_categoria {left:23px; color:#dd1e16}
.n_fecha {right:18px; color:#999999; text-align:right}
.n_bordetit_dertop {position:absolute; right:18px; bottom:0px; width:20px; height:13px; z-index:3}
/* Bloque superior - Seccion Titulo y Resumen */
.n_subcont_1_2 {position:relative; left:0px; top:36px;min-height:58px; height:auto; width:366px; z-index:4; background-color:#dd1e16; background-position:right; background-repeat:repeat-y}
.n_icono {float:left; margin-left:5px; height:35px; vertical-align:middle; z-index:5}
.n_tittext {width:345px; z-index:5; min-height:37px; vertical-align:middle; padding-right:15px; padding-bottom:5px;}
.n_resumen {position:relative; left:0px; width:366px; min-height:21px; height:auto !important; z-index:5; text-align:center; vertical-align:middle; background-color:#cccccc; background-position:top right; background-repeat:repeat-y}
.n_titflecha {position:absolute; right:15px; top:-25px; z-index:6}
.n_resu_izqbot {position:absolute; left:0px; bottom:-8px; height:24px; width:23px; vertical-align:middle; z-index:5}
.n_resu_derbot {position:absolute; right:0px; bottom:-8px; width:20px; z-index:6}
.n_resu_abajo {position:absolute; left:23px; bottom:-8px; height:9px; width:323px; z-index:6; background-position:top; background-repeat:repeat-x}
.n_resutext {font-size:10px; padding-left:26px; width:300px; text-align:center}
/* Bloque intermedio */
.n_subcont_2 {padding:35px 0 5px 20px;width:355px;min-height:40px; visibility:visible; height:auto !important; z-index:2;}
/* Bloque inferior */
.n_subcont_3 {margin-left:6px; padding:5px 0 5px 20px; width:358px; z-index:2; background-color:#cccccc}
.n_comentesq {position:relative; left:0px; top:0px; width:100%; z-index:3}
.n_coment_izqsup {position:absolute; left:-26px; top:-17px; height:13px; width:23px; z-index:4}
.n_coment_dersup {position:absolute; right:0px; top:-17px; width:18px; height:13px; z-index:4}
.n_coment_izqinf {position:absolute; left:0px; bottom:0px; height:11px; width:23px; z-index:4}
.n_coment_derinf {position:absolute; right:0px; bottom:0px; width:18px; height:11px; z-index:4}
Código donde surge el problema
Código HTML:
<div> <div id="noticia3" class="n_cont"> <!-- Bordes y esquinas --> <div id="izquierda3" class="n_b_izq"> </div> <div id="derecha3" class="n_b_der"> </div> <div id="izqarriba3" class="n_e_izqtop"> <img src="imagenes/news_portada/cuadro_0000.gif" alt="" width="23" height="36"> </div> <div id="dercharriba3" class="n_e_dertop"> <img src="imagenes/news_portada/cuadro_0004.gif" alt="" width="18" height="36"> </div> <div id="caja13" class="n_subcont_1"> <!-- Contenido superior --> <div id="arriba3" class="n_subcont_1_1" style="background-image: url(imagenes/news_portada/cuadro_0001.png);"> <div id="categoria3" class="n_categoria"> Categoria </div> <div id="fecha3" class="n_fecha"> Fecha </div> <div id="bordetit_dertop3" class="n_bordetit_dertop"> <img src="imagenes/news_portada/cuadro_0003.gif" alt="" width="20" height="13"> </div> </div> <div id="titulo3" class="n_subcont_1_2" style="background-image: url(imagenes/news_portada/cuadro_0005.png);"> <div id="icono3" class="n_icono"> <img src="imagenes/news_portada/icono.png" alt="icono" title="icono" width="40" height="35"> </div> <div id="tittexto3" class="n_tittext"> <span style="color: rgb(255, 255, 255); font-size: 13pt;"><b>Titulo</b></span> </div> <div><div id="resumen3" class="n_resumen" style="background-image: url(imagenes/news_portada/cuadro_0006.png);"> <div id="titflecha3" class="n_titflecha"> <img src="imagenes/news_portada/flecha_blanca.png" alt="" width="23px" height="21px"> </div> <div id="resumenizq3" class="n_resu_izqbot"> <img src="imagenes/news_portada/cuadro_0008.gif" alt="" width="23" height="24"> </div> <div class="n_resutext"><strong>Resumen</strong></div> <div id="resumender3" class="n_resu_derbot"> <img src="imagenes/news_portada/cuadro_0007.gif" alt="" width="20" height="24"> </div> <div id="resumenabajo3" class="n_resu_abajo" style="background-image: url(imagenes/news_portada/cuadro_0002.png);"> </div> </div></div> </div> </div> <!-- Contenido intermedio --> <div id="texto3" class="n_subcont_2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus imperdiet rutrum. Duis pretium arcu sit amet erat eleifend ut vestibulum ipsum aliquet. Suspendisse et dictum justo...</p> <p align="right"><img src="imagenes/button_mas.gif" alt="Leer mas" width="107px" border="0" height="33px"></p> </div> <!-- Contenido inferior --> <div id="caja23" class="n_subcont_3"> <div id="comentt3" class="n_comentesq"> <div id="comentizqt3" class="n_coment_izqsup"> <img src="imagenes/news_portada/cuadro_0100.gif" alt="" width="23" height="13"> </div> <div id="comentdert3" class="n_coment_dersup"> <img src="imagenes/news_portada/cuadro_0101.gif" alt="" width="18" height="13"> </div> </div> <span style="font-size: 7pt;"><b><span style="color: rgb(153, 153, 153);">Autor | 0 comentarios |</span> <span style="color: rgb(255, 255, 255);">Noticias de la misma categoría ►►</span></b></span><br> Noticia 2<br> Noticia 3<br> Noticia 4<br> Noticia 5<br> Noticia 6<br> <div id="comentizqd3" class="n_coment_izqinf"> <img src="imagenes/news_portada/cuadro_0200.gif" alt="" width="23" height="11"> </div> <div id="comentderd3" class="n_coment_derinf"> <img src="imagenes/news_portada/cuadro_0201.gif" alt="" width="18" height="11"> </div> </div> </div> </div>
El código del problema se repite en cada noticia que aparece en la página (un total de 6).
Los bloques que desaparecen son "texto3" y "titulo3".
Gracias
SOLUCIONADO
Ya he descubierto la razón de esta rareza. Tenía instalado Internet Explorer 8, pero era la versión Beta. Tras actualizarlo ya no me da problemas. Aun así, sigue siendo algo sumamente raro y extraño.
