Foros del Web » Creando para Internet » CSS »

Error en CSS al actualizar en chrome

 Estas en el tema de Error en CSS al actualizar en chrome en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/03/2015, 23:20
 
Fecha de Ingreso: julio-2014
Mensajes: 7
Antigüedad: 10 años, 4 meses
Puntos: 0
Error en CSS al actualizar en chrome
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.
  #2 (permalink)  
Antiguo 10/03/2015, 23:55
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 10 años
Puntos: 91
Respuesta: Error en CSS al actualizar en chrome
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 ;)
  #3 (permalink)  
Antiguo 11/03/2015, 00:15
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Error en CSS al actualizar en chrome
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>.
__________________
(:
  #4 (permalink)  
Antiguo 11/03/2015, 06:34
 
Fecha de Ingreso: julio-2014
Mensajes: 7
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Error en CSS al actualizar en chrome
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.
  #5 (permalink)  
Antiguo 11/03/2015, 08:11
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 10 años
Puntos: 91
Respuesta: Error en CSS al actualizar en chrome
agrega esto en div#container
Cita:
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
Cita:
.item.masonry-brick {
position: relative !important;
top: 0 !important;
left: 0 !important;
}

Etiquetas: background, chrome, color, float, página, width
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:33.