Error en CSS al actualizar en chrome

[jorgecominges]

Hola de nuevo,

os escribo porque tengo un error que no consigo solucionar. El caso es que estoy haciendo una web y resulta que en firefox e internet explorer se ve bien pero en chrome pasa una cosa muy curiosa. Si inserto la url de la web en la barra de direcciones de chrome y le doy a "enter" entonces si se ve bien, pero si le doy a actualizar ya no se ve bien. El problema es que una serie de divs que contienen noticias en el centro de la pagina se superponen unos a otros y tambien al footer.



al darle a actualizar página



Le he dado mil vueltas, he probado lo del clear:both, y no consigo arreglarlo.

Aqui está el código de los articulos:

Código:

<div id="lolo">
<div id="container" class="masonry">


<div class="item" style="position: absolute; top: 0px; left: 0px;">
	<div>
        <img src="imagenes/coelux-2.jpg">
    </div>
    <div style="padding-top:10px; padding-right:10px; text-align:left">
    	<h2><font id="titulo">Titulo provisional en grande, muy grande</font></h2>
    </div>
    <div style="padding-bottom:5px; padding-top:5px;" align="left">
    	<hr width="96%" size="1px" color="#D3D3D3">
    </div>
    <div style="padding-right:10px; padding-bottom:10px">
    	<p id="articuloshort">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e</p>
	</div>
    <div align="center">
    <font id="fecha"><b>ver mas [+]</b></font>
    <br>
    <br>
    <font id="fecha">30/05/2015&nbsp;&nbsp;&nbsp;&nbsp;10 </font><img src="imagenes/mensajes2.jpg" style="max-width:12px;">
    </div>
</div>

<div class="item" style="position: absolute; top: 0px; left: 0px;">
	<div>
        <img src="imagenes/coelux-2.jpg">
    </div>
    <div style="padding-top:10px; padding-right:10px; text-align:left">
    	<h2><font id="titulo">Titulo provisional en grande, muy grande</font></h2>
    </div>
    <div style="padding-bottom:5px; padding-top:5px;" align="left">
    	<hr width="96%" size="1px" color="#D3D3D3">
    </div>
    <div style="padding-right:10px; padding-bottom:10px">
    	<p id="articuloshort">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e</p>
	</div>
    <div align="center">
    <font id="fecha"><b>ver mas [+]</b></font>
    <br>
    <br>
    <font id="fecha">30/05/2015&nbsp;&nbsp;&nbsp;&nbsp;10 </font><img src="imagenes/mensajes2.jpg" style="max-width:12px;">
    </div>
</div>

 
<div class="item" style="position: absolute; top: 0px; left: 0px;">
	<div>
        <img src="imagenes/coelux-2.jpg">
    </div>
    <div style="padding-top:10px; padding-right:10px; text-align:left">
    	<h2><font id="titulo">Titulo provisional en grande, muy grande</font></h2>
    </div>
    <div style="padding-bottom:5px; padding-top:5px;" align="left">
    	<hr width="96%" size="1px" color="#D3D3D3">
    </div>
    <div style="padding-right:10px; padding-bottom:10px">
    	<p id="articuloshort">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e</p>
	</div>
    <div align="center">
    <font id="fecha"><b>ver mas [+]</b></font>
    <br>
    <br>
    <font id="fecha">30/05/2015&nbsp;&nbsp;&nbsp;&nbsp;10 </font><img src="imagenes/mensajes2.jpg" style="max-width:12px;">
    </div>
</div>


<div class="item" style="position: absolute; top: 0px; left: 0px;">
	<div>
        <img src="imagenes/coelux-2.jpg">
    </div>
    <div style="padding-top:10px; padding-right:10px; text-align:left">
    	<h2><font id="titulo">Titulo provisional en grande, muy grande</font></h2>
    </div>
    <div style="padding-bottom:5px; padding-top:5px;" align="left">
    	<hr width="96%" size="1px" color="#D3D3D3">
    </div>
    <div style="padding-right:10px; padding-bottom:10px">
    	<p id="articuloshort">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e</p>
	</div>
    <div align="center">
    <font id="fecha"><b>ver mas [+]</b></font>
    <br>
    <br>
    <font id="fecha">30/05/2015&nbsp;&nbsp;&nbsp;&nbsp;10 </font><img src="imagenes/mensajes2.jpg" style="max-width:12px;">
    </div>
</div>


<div class="item" style="position: absolute; top: 0px; left: 0px;">
	<div>
        <img src="imagenes/coelux-2.jpg">
    </div>
    <div style="padding-top:10px; padding-right:10px; text-align:left">
    	<h2><font id="titulo">Titulo provisional en grande, muy grande</font></h2>
    </div>
    <div style="padding-bottom:5px; padding-top:5px;" align="left">
    	<hr width="96%" size="1px" color="#D3D3D3">
    </div>
    <div style="padding-right:10px; padding-bottom:10px">
    	<p id="articuloshort">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e</p>
	</div>
    <div align="center">
    <font id="fecha"><b>ver mas [+]</b></font>
    <br>
    <br>
    <font id="fecha">30/05/2015&nbsp;&nbsp;&nbsp;&nbsp;10 </font><img src="imagenes/mensajes2.jpg" style="max-width:12px;">
    </div>
</div>


<div class="item" style="position: absolute; top: 0px; left: 0px;">
	<div>
        <img src="imagenes/coelux-2.jpg">
    </div>
    <div style="padding-top:10px; padding-right:10px; text-align:left">
    	<h2><font id="titulo">Titulo provisional en grande, muy grande</font></h2>
    </div>
    <div style="padding-bottom:5px; padding-top:5px;" align="left">
    	<hr width="96%" size="1px" color="#D3D3D3">
    </div>
    <div style="padding-right:10px; padding-bottom:10px">
    	<p id="articuloshort">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e</p>
	</div>
    <div align="center">
    <font id="fecha"><b>ver mas [+]</b></font>
    <br>
    <br>
    <font id="fecha">30/05/2015&nbsp;&nbsp;&nbsp;&nbsp;10 </font><img src="imagenes/mensajes2.jpg" style="max-width:12px;">
    </div>
</div>

<div style="clear:both"></div>

</div>
</div>

y su CSS

Código:

div#container {

	position: relative; 
	background-color:white; 
	width:100%;
	margin-bottom:20px;
	
}

.item {
	
	float: left;
	max-width:245px;
	width: 33%; 
	margin: 10px;
	padding-bottom: 10px;
	font-size: 11px; 
	background-color: #fff; 
	box-shadow: 4px 3px 3px rgba(34,25,25,0.2); 
	-moz-box-shadow: 4px 3px 3px rgba(34,25,25,0.2); 
	-webkit-box-shadow: 4px 3px 3px rgba(34,25,25,0.2);
	
}

div#lolo {
	background-color:white;
	width:100%;
	}

Muchas gracias por vuestra paciencia.

[AngelKrak]

quitale el position: absolute; top: 0px; left: 0px; que esta al lado del <div class="item" y yo recargo la pag varias veces y me sale bien >_< talves era por eso, o si no pasa el link de la web pa ver mejor si no se arreglo ;)

[pzin]

Si usas Masonry, que parece que sí, tal vez estés ejecutando JavaScript antes de que termine de cargar el resto. Masonry le da una altura en medida dija al contenedor. Prueba a ejecutar Masonry después de cargar el resto de la página. Por lo general es buena práctica poner las llamadas a archivos JavaScript al final del código, antes de </html>.

[jorgecominges]

Gracias por vuestras respuestas.


AngelKrak,

He probado a quitar lo que comentabas y no cambia nada, el problema sigue siendo el mismo.

La web es [URL="http://www.cominges.es/inspiracion2.php"]http://www.cominges.es/inspiracion2.php[/URL]

Lo gracioso es que al actualizar no se ve bien pero al disminuir la ventana del navegador y cambiar de 3 a 2 columnas si se ve bien. La verdad es que no entiendo nada.


pzin

Si, uso masonry, lo ejecuté al final y el problema continua, sigo igual. Por otro lado, tenía otro problema con la ejecución de 2 plugins de jQuery y el noConflict y lo que me comentaste lo ha solucionado, así que muchísimas gracias.

[AngelKrak]

agrega esto en div#container

height: 904px !important;

con eso queda solucionado la altura mas sin embargo los items se juntan para eso como dije borra el style de .item masonry-brick que esta en el html o tambien puedes agregar esto a tu css

.item.masonry-brick {
position: relative !important;
top: 0 !important;
left: 0 !important;
}