Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/09/2008, 08:41
zeres
 
Fecha de Ingreso: febrero-2007
Mensajes: 11
Antigüedad: 17 años, 1 mes
Puntos: 0
divs inestables en firefox

Hola,

estoy maquetando mi primera web con CSS, Ajax y divs, y estoy teniendo un problema con un div que muestra una galería de imágenes clicables. En Safari y Opera no parece haber problema, incluso en Explorer 7 aparecen bien los elementos de la galería (aunque luego no funciona bien al clicar en ellas), pero en Firefox me está pasando algo rarísimo. Si cargo la página, no aparecen las tres primeras imágenes en la primera fila, las 3 siguientes en la segunda,... no, se caen inexplicablemente (para mi, claro) y, lo que es más raro, si actualizo la página va cambiando el desastre. Las que antes no estaban caídas se caen ahora, o se arreglan otras, hasta el punto que después de actualizar una cuantas veces puedo hasta conseguir que se ven bien, como deberían desde un principio, pero si vuelvo a actualizar, alguna se cae fijo.

Os dejo el código del CSS de los divs implicados.

Código:
* {
	padding:0;
	margin:0;
}


/* ////////////////////////////// CONTENEDOR /////////////////////////// */



.contenedor {
	height: 440px;
	text-align: center;
	width: 980px;
	border: 1px solid #000000;
}

div.contenedor {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 440px;
	margin-top: -220px;
	margin-left: -490px;
	display: table-cell;
}


/* ////////////////////////////// MENU /////////////////////////// */


.menu {
	height: 440px;
	text-align: center;
	width: 230px;
	border: 0px;
	line-height: 20px;
}

div.menu {
	margin-left: auto;
	margin-right: auto;
	display: table;
}


/* ////////////////////////////// CONTENIDO /////////////////////////// */


.izquierda {
	height: 440px;
	text-align: left;
	width: 375px;
	border: 0px;
	margin: 0px;
}

div.izquierda {
	margin: 0px;
	position:absolute;
	display: table;
	left: 0px;
	top: 0px;
	width: 375px;
}

.galeria {
	height: 80px;
	width: 80px;
	border: 0px;
}

div.galeria {
	margin-top: 24px;
	margin-left: 30px;
	margin-bottom: 0px;
	margin-right: 0px;
	display: table;
	float: left;
}

.derecha {
	height: 440px;
	text-align: center;
	width: 375px;
	border: 0px;
}

div.derecha {
	margin-top: -440px;
	padding-left: 605px;
	display: table;
}
Y ahora el código html de los divs.

Código:
<div class="contenedor">
    <div class="izquierda">
        <div class="galeria"><a href="#" onclick="ajaxpage('ilustracion/ilustracion_01.html', 'muestra');" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ilustracion_01','','../img/ilustracion/min/01.gif',1)"><img src="../img/ilustracion/min/01bn.gif" alt="ilustración 1" name="ilustracion_01" width="80" height="80" border="0" id="ilustracion_01" /></a>
        </div>
        <div class="galeria" style="float:left"><a href="#" onclick="ajaxpage('ilustracion/ilustracion_02.html', 'muestra');" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ilustracion_02','','../img/ilustracion/min/02.gif',1)"><img src="../img/ilustracion/min/02bn.gif" alt="ilustracion 2" name="ilustracion_02" width="80" height="80" border="0" id="ilustracion_02" /></a>
        </div>
        <div class="galeria"><img src="../img/ilustracion/min/03.gif" width="80" height="80" border="0" /></div>
        <div class="galeria"><img src="../img/ilustracion/min/04.gif" width="80" height="80" border="0" /></div>
        <div class="galeria"><img src="../img/ilustracion/min/05.gif" width="80" height="80" border="0" /></div>
        <div class="galeria"><img src="../img/ilustracion/min/06.gif" width="80" height="80" border="0" /></div>
        <div class="galeria"><img src="../img/ilustracion/min/07.gif" width="80" height="80" border="0" /></div>
        <div class="galeria"><img src="../img/ilustracion/min/08.gif" width="80" height="80" border="0" /></div>
        <div class="galeria"><img src="../img/ilustracion/min/09.gif" width="80" height="80" border="0" /></div>
        <div class="galeria"><img src="../img/ilustracion/min/01.gif" width="80" height="80" border="0" /></div>
        <div class="galeria"><img src="../img/ilustracion/min/02.gif" width="80" height="80" border="0" /></div>
        <div class="galeria"><img src="../img/ilustracion/min/03.gif" width="80" height="80" border="0" /></div>
    </div>
    <div class="menu">
     <a href="inicio.html"><img src="../img/logo_zerestudio.gif"" width="230" height="130" border="0" style="margin-top: 155px; alt=" longdesc="logotipo de zerestudio"zerestudio /></a><br />
        <a href="inicio.html" style="margin-left: 2px">inicio&nbsp;&nbsp;|&nbsp;&nbsp;home</a><br />
        <a href="zerestudio.html">zerestudio&nbsp;&nbsp;|&nbsp;&nbsp;zerestudio</a><br />
        <h1>ilustración&nbsp;|&nbsp;illustration</h1>
        <a href="corporativa.html" style="margin-right: 35px">imagen corporativa&nbsp;&nbsp;|&nbsp;&nbsp;brand image</a><br />
        <a href="web.html">web&nbsp;&nbsp;|&nbsp;&nbsp;web</a><br />
        <a href="contacto.html" style="margin-right: 6px">contacto&nbsp;&nbsp;|&nbsp;&nbsp;contact</a><br />   
    </div>
  <div id="muestra" class="derecha"></div>
</div>
¿Dónde puede estar el problema? ¿Alguien puede ayudarme?

Un saludo.