Foros del Web » Creando para Internet » CSS »

divs inestables en firefox

Estas en el tema de divs inestables en firefox en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/09/2008, 09:41
 
Fecha de Ingreso: febrero-2007
Mensajes: 11
Antigüedad: 10 años, 10 meses
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.
  #2 (permalink)  
Antiguo 16/09/2008, 11:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: divs inestables en firefox

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.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 16/09/2008, 12:48
 
Fecha de Ingreso: febrero-2007
Mensajes: 11
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: divs inestables en firefox

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?
  #4 (permalink)  
Antiguo 16/09/2008, 12:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: divs inestables en firefox

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.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:20.