divs inestables en firefox

[zeres]

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.

[Mikmoro]

A primera vista parece que hay un par de cosas un poco raras: primero, no sé por qué marcas un selector con sus propiedades como .contenedor, y luego otro con otras propiedades como div.contenedor. Es lo mismo, y es un poco incongruente con el ejemplo de tu html. Lo mismo haces con alguna otra:

Tampoco tiene mucho sentido que coloques el contenedor con posición absoluta ventrado en la pantalla y luego le des un display: table-cell;, sin tener aparentemente un display table delante en alguna parte.

Esas cosas son al menos raras, como te digo, pero sin ver el sitio en funcionamiento es difícil, prque al no verse las imágenes no podemos ver qué ocurre realmente.

[zeres]

Gracias por responder. Acabo de probarlo subiéndolo al servidor y ahí parece que no da problemas :) De hecho, funciona hasta lo de los enlaces en Explorer.

¿Cuál sería la forma correcta de poner lo de los selectores?

[Mikmoro]

Igual da que pongas "div.contenedor", que ".contenedor", pero una de las dos. Si pones sólo .contenedor serviría para cualquier elemento al que pusieras esa clase, aunque no fuera un div. De la otra manera, sólo a los div que tengan esa clase.