Problemas con css y firefox

subharb · #1 (**permalink**) 30/12/2008, 10:31

Hola chicos, tengo un poco de experiencia, estoy haciendo una pagina, tengo un poco de experiencia, pero aqui me he perdido.
Estoy colocando los divs y por alguna razon a partir del 3º me lo monta, pese a estar usando posicionamiento relativo en FF sin embargo en IE se coloca todo bien...
Si me pudierais ayudar os lo agradeceria, muchas gracias.
Este es el html.

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style_iframe.css" />


</head>

<body>
	<div id="botones-buscador">Hazte Amigo Enviar Mensaje Contactar Enviar Fotos</div>
				
			<!--------------------------------------------------------------->
			<!-- FOTOS                                          -->
			<!--------------------------------------------------------------->
			<div id="content-noticias">
					<div id="noticias">
						<img id="not" src="img/mini_noticia.jpg">
						<img id="not" src="img/mini_noticia.jpg">
						<img id="not" src="img/mini_noticia.jpg">
					</div>										
				</div>
				<div id="galerias-fotos">
					
						<img id="gal_prin" src="img/foto_prin.png">
						
						<div id="galerias">
							<img id="gal_pq" src="img/mini_foto.jpg">
							<img id="gal_pq" src="img/mini_foto.jpg">
							<img id="gal_pq" src="img/mini_foto.jpg">
							<img id="gal_pq" src="img/mini_foto.jpg">
							<img id="gal_pq" src="img/mini_foto.jpg">
							<img id="gal_pq" src="img/mini_foto.jpg">
						</div>
						
					
				</div>
				<div id="descuentos">
					
				</div>
				
				
				
</body>
</html>

Y aqui el css:

Código:

/* CSS Document */


#botones-buscador{
	position:relative;
	background-image:url(img/boton-barra.png);
	width:750px;
	height:88px;
	margin-left:20px;
	text-indent:-1000px;
}
#galerias-fotos{
	position:relative;
	background:url(img/ultimas_fotos.png) no-repeat;
	width:332px;
	height:600px;
	margin-left:28px;
	margin-top:-50px;
	float:left;
}
#gal_prin{
	position:relative;
	margin-left:10px;
	margin-top:100px;
	
	}
#gal_pq{
	position:relative;
	margin-left:6px;
	margin-top:35px;
	float:left;
	border: 1px solid #9d0069;
	}
#noticias{
	margin-left:20px;
}	
#not{
	position:relative;
	margin-right:30px;
	margin-top:60px;
	float:left;
	border: 1px solid red;

}
#content-noticias{
	 text-align:left;
	 position:relative;
	 background:url(img/noticias.png) no-repeat;
	 width:475px;
	 height:277px;
	 float:right;
	 }
#galerias{
	margin-top:-25px; 
	margin-left:5px;
}
#descuentos{
	position:relative;
	display:block;
    background:url(img/descuentos.png) no-repeat;
	width:391px;
	height:149px;
  }

kseso? · #2 (**permalink**) 30/12/2008, 12:46

Mira qué tienes declarado:

Cita:

#content-noticias{text-align:left;
position:relative;
background:url(img/noticias.png) no-repeat;
width:475px;
height:277px;
float:right;

Descuenta los márgenes de #noticias y de #not y ya verás el espacio que tienes para alojar imágenes.

Y por cierto,
se marcan como id (#) aquellos elementos que sólo se van a utilizar una vez por página. Si lo aplicas reiteradamente es mejor que los identifiques como clases (.)

Un saludo