Entrar

Ayuda Con diferencias entre el Ie y el Firefox

Odp · · Solicitar retirada
Bueno, mi problema es como el de todos,,, se ve diferentes en el Ie y el Firefox.
Intente varias cosas pero sigo sin poder arreglarlo.
La pagina es Http://clanodp.coolpage.biz
El codigo css es 
* {margin:0px ; padding:0px ; border: 0px}
body { background-image: url(objetos/fondo.jpg) ; 
			 background-repeat: no-repeat ;
			 background-attachment: fixed ;
			 text-align: center ;}
#all { width: 800px;
			 margin: 50px auto }
 
#cabecera { width: 800px;
						margin: 0px auto 0px auto ;
						overflow: hidden}

#fondo { float: left ;
			 	 width: 800px ;
			 	 background-color: #8C8E9C ;
				 padding-bottom: 100px ;
				 text-align: left ;}
				 
#cuerpo { float: left ;
					width: 740px ; 
					margin-right: 30px ;
					margin-left: 30px ;					
					background-color: #B5AEC6 ; 
					margin-bottom: 100px ;}

#cosogris-arriva { width: 710px ;
								 	 height: 30px ;
								 	 margin: 10px 0px 0px 15px ;
									 overflow: hidden ;}
									 
#cosogris-abajo { width: 710px ;
									height: 30px ;
									margin: 0px 0px 10px 15px ;
								 	overflow: hidden ; 
									float: left;}
		
#menu { width: 740px ;
				background-color: #8C8E9C ;
				float: left; }
#menu li { float: left;
				 	 padding: 0px 30px 0px 30px;
					 font-weight: bold ;
					 list-style: none;}
#menu li a { display: block ;
				 	 	 color: black ;
				 	 	 text-decoration: none ;
						 background-color: #8F8DA5 ;
						 padding-bottom: 15px;}
						 

#barra { width: 150px;
			 	 float: left ; 
				 text-align: center;
				 margin: 15px 10px 15px 10px ;
				 font-size: 12px}	
#barra li { list-style: none ;
					 	font-weight: bold ;
						height: 24px ;}								
#barra li p { background-image: url(objetos/menu1.jpg); 
					 		padding-top: 5px;
							height: 24px ; }	
#barra li a { padding-top: 5px ;
			 				display: block ;
					 	 	background-image: url(objetos/menu1.jpg);
							background-repeat: no-repeat ;
							color:#EAF3F8;
							text-decoration:none;
							height: 24px ;}
#barra li a:hover {	background-image: url(objetos/menu2.jpg) ;
										background-repeat: no-repeat ;
										color:#fff;}
													 					

#fondo-cuerpo { width: 540px;
								margin: 15px 10px 15px 0px ;
								float: right ; 
								background-color: #E7E3F7 ;}
								
#int-cuerpo { margin: 15px ; 
							background-color: white ;
							text-align: justify ;}
#int-cuerpo h1 {text-align: center ;}
#int-cuerpo p { padding: 10px ;
								text-indent: 15px ; }

Mi problema es que cn el firefox se ve bien, pero el Ie me agranda las divs (dios sabe x que) tonces la imagen de arriba se ve corrida.
El Ie me agranda las divs por que en el estilo .css le seteo a las divs el Width y float : left (para no tener q setearle el height al firefox y q las agrande depende del contenido que tienen adentro.)
Si alguien tiene una solucion por favor que me la diga, la unica que se me ocurre es sacarle el Float: left y setearle un alto (height) fijo asi el firefox me alarga la div.

Muchas Gracias. Si no entiendieron lo que hice, no duden en preguntar, respondere lo mas rapido posible (busco desesperadamente una solucion, qien habra sido el que hizo q se vean las pagina diferentes en los exploradores,,,,)

Saludos.
Odp · · Solicitar retirada
Ya tiene un float: left en la div coso gris abajo :S.
Otra posible solucion?, sigo buscando ¬¬,,,.
Igual muchas gracias por ayudarme :D.

Saludos.
Odp · · Solicitar retirada
Bue, traigo nuevos descubrimientos...
No entiendo por que, pero cuando pones float: left a una capa (para q el firefox la estire automaticamente y no qede mal), el Ie empieza a tomar (en esa capa) el margin como si fuese el doble. Ej, una capa (cn float left), si pones margin-left: 15px el firefox te toma el margin de 15px, pero el Ie te lo toma de 30px.
Ese es el problema que tengo, alguna manera de hacer que se vea bien sin usar la propiedad float: left?, o otra manera de arreglar los margins?.

Saludos, por favor si pueden ayudenme.


Este es mi estilo .css :
* {margin:0px ; padding:0px ; border: 0px ; text-align: center ;}
body { background-image: url(objetos/fondo.jpg) ; 
			 background-repeat: no-repeat ;
			 background-attachment: fixed ;}
#all { width: 800px;
			 margin: 50px auto ;}
 
#fondo { width: 800px ;
			 	 background-color: #8C8E9C ;
				 padding-bottom: 100px ;
				 float: left;}
				 
#cabecera { width: 800px;
						margin: 0px auto 0px auto ;
						overflow: hidden ;}				 
				 
#cuerpo { width: 740px ;
					margin: 0px 30px auto; 
					background-color: #B5AEC6 ;
					float: left;}

#cosogris-arriva { width: 710px ;
								 	 height: 30px ;
								 	 margin: 10px auto 0px auto;
									 overflow: hidden ;}
									 
#cosogris-abajo { width: 710px ;
									height: 30px ;
									margin:0px auto 10px auto;
								 	overflow: hidden ;
									float: left; }
		
#menu { width: 740px ;
				background-color: #8C8E9C ;
				float: left ;}
#menu li { float: left;
				 	 padding: 0px 30px 0px 30px;
					 font-weight: bold ;
					 list-style: none;}
#menu li a { display: block ;
				 	 	 color: black ;
				 	 	 text-decoration: none ;
						 background-color: #8F8DA5 ;
						 padding-bottom: 15px;}
						 

#barra { width: 150px;
			 	 float: left ; 
				 text-align: center;
				 margin-left: 10px;
				 font-size: 12px}	
#barra li { list-style: none ;
					 	font-weight: bold ;
						height: 24px ;}								
#barra li p { background-image: url(objetos/menu1.jpg); 
					 		padding-top: 5px;
							height: 24px ; }	
#barra li a { padding-top: 5px ;
			 				display: block ;
					 	 	background-image: url(objetos/menu1.jpg);
							background-repeat: no-repeat ;
							color:#EAF3F8;
							text-decoration:none;
							height: 24px ;}
#barra li a:hover {	background-image: url(objetos/menu2.jpg) ;
										background-repeat: no-repeat ;
										color:#fff;}
													 					

#fondo-cuerpo { width: 540px;
								margin: 15px 10px 15px 0px ;
								float: right ; 
								background-color: #E7E3F7 ;}
								
#int-cuerpo { height: 500px;
							margin: 15px ; 
							background-color: white ;
							text-align: justify ;}
#int-cuerpo h1 {text-align: center ;}
#int-cuerpo p { padding: 10px ;
								text-indent: 15px ; }
=FeMe= · · Solicitar retirada
Mira las soluciones, son hacer la web con tablass.
Si ya se es un bajon, que me lo dijo juanma cuando di a criticar mi web.
Y ahora me lei el tuto de tablas, aunque no me sale muy bien :P .
Pero siempre es recomendablee las tablas antes que las capas.
Jugoncan · · Solicitar retirada
Bueno no tanto, yo aconsejo que mezcles los dos, dependiendo de lo que quieras hacer :wink:
Saludos, Juanma