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 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 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 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 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 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 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.