Se ve malísimo en IE7 y en la vista de compatibilidad del 8

[kaiseer]

Hola!

Estoy nuevo en esto del css, y ahorita estoy haciendo una panilla con formulario. En Mozilla y Opera no hay ningun problema. Pero resulta que en IE7 y solo en la vista de compatibilidad del 8 casi todo se mueve, es como si tomara márgenes mayores, no se de donde. Lo mas seguro, es que como estoy aprendiendo , en el código CSS haya algo demás o mal que el IE lo toma como margen. no se!

El código CSS es el siguiente:

Código:

/*basicos*/
body  {
	text-align:center;
	font-family: Trebuchet MS, Calibri; 
	background-image:url(http://planilla/body/arboles.jpg);
	background-color:#b2ddd4;
	margin-left:35px;
	background-position:center bottom;
	background-repeat:no-repeat;
	}
#wrap {
	width:1130px;
	margin:0 auto;
	margin-top:-15px;
	padding:5px;
	text-align:left;
	}
#top {
	width:770px;
	height:278px;
	background-image:url(http://imagenes/blanco_top.png);
	background-repeat:no-repeat;
	margin-left: 190px;
	margin-top:200px;		
}
#content {
	width:770px;
	height:1900px;
	background-image:url(http://imagenes/blanco_content.png);
	background-repeat:repeat-y;
	margin-left: 190px;					
}
#bottom {
	width:769px;
	height:57px;
	background-image:url(http://imagenes/blanco_bottom.png);
	background-repeat:no-repeat;
	margin-left: 190px;		
}
#logoMP {
	position:absolute;
	width:399px;
	height:301px;
	background-image:url(http://Basics/logo_mp.png);
	background-repeat:no-repeat;
	margin-left: 182px;			
}
#titulo {
	position:absolute;
	width:309px;
	height:126px;
	background-image:url(http://planilla/body/planilla.jpg);
	margin-left:245px;
	margin-top:220px;
	background-repeat:no-repeat;
}
#globo {
	position:fixed;
	width:289px;
	height:204px;
	margin-top:610px;
	margin-left:37px;
	background-image:url(http://Basics/globo.png);		
}

/*OtroSsSS*/

#arboles_arriba {
	position:absolute;
	background-image:url(http://planilla/body/arboles_arriba.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	width:995px;
	height:584px;
	margin-left:80px;
}

/*---------->>Formulario<<----------*/

.form {
	background-color: #C6E8EA; border: 0px; width: 275px; color:#999999; font-weight:bolder;}
.form1 {
	background-color: #C6E8EA; border: 0px; width: 275px; color:#999999; height:60px; font-weight:bolder;}
.inputs {
	{font-size:13px; color:#EAEAEA; font-weight:normal;}

}
#formulario {
	background-position:center top;
	text-align:center;
	height:1800px;
}
.datos{font-size:17px; color:#EAEAEA; line-height:1.5em; font-weight:normal; width: 614px; margin-left: 80px; text-align:justify; }

.portada{background-color:transparent; border: 0px; width: 275px; color:#FFFFFF; font-size:13px; font-family: Comic Sans Ms,Trebuchet MS; border: #000099; height:330px; width:510px; font-weight:bolder; overflow-y:hidden;

}

#divportada{position:absolute; margin-top:126px; margin-left:48px; height:343px; width:525px;}

#portada {
	position:absolute;
	background-image:url(http://planilla/body/portada1.png);
	width:602px;
	height:683px;
	margin-top:10px;
}
#manzana {
	position:absolute;
	background-image:url(http://planilla/body/manzana1.png);
	width:82px;
	height:82px;
	background-repeat:no-repeat;
	margin-top:-74px;
	margin-left:424px;
}
.tem {
	width:478px;
	text-align:justify;
	margin-left:65px;
	margin-top:10px;
	font-size:19px; font-weight:bold; color:#FF9900;

}
	.trabajo {
		margin-top:20px;
		margin-left:10px;
		background-image:url(http://planilla/body/trabajo.jpg);
		background-repeat:no-repeat;
		width:126px;
		height:85px;
	}
	.Ptrabajo {
		margin-left:195px;
		width:275px;	
}

	.detallando {
		margin-top:20px;
		margin-left:20px;
		background-image:url(http://planilla/body/detallando.jpg);
		background-repeat:no-repeat;
		width:135px;
		height:75px;
	}
	.Pdetallando {
		margin-left:184px;
		width:275px;	
}

	.investigar {
		margin-top:20px;
		background-image:url(http://planilla/body/a-investigar.jpg);
		background-repeat:no-repeat;
		width:174px;
		height:74px;
	}
	.Pinvestigar {
	position:absolute;
		margin-top:-10px;
		margin-left:206px;
		width:275px;	
	}
	.Pitexto {line-height:15px; font-size:13px; color:#EAEAEA; font-weight:normal;}
	
/*PAQUETES*/

	.paquete {
		margin-top:20px;
		margin-left:13px;
		background-image:url(http://planilla/body/paquete.jpg);
		width:447px;
		height:122px;
	}
	
	.Paqinputs {
		margin-top:20px;
		margin-left:77px;
		line-height:15px;
		color:#EAEAEA;
}
.otros {
	background-color: #C6E8EA; border: 0px; width: 521px; color:#999999; height:100px; font-weight:bolder;}

#otros {
	margin-top:275px; font-size:19px; font-weight:bold; color:#FF9900;
		
}

Ah por cierto, en el Netscape el fondo de árboles arriba no se ve, que sería el div árboles_arriba...

Espero, si tienen el tiempo puedan ayudarme en estos detalles.

Gracias de antemano...

[luckystrikede11]

usa siempre el modo de compatibilidad en IE8 cuando diseñes

[kaiseer]

Hola Lucystrikede, es cierto. Pero problema ahora, es que si logro que se vea bien la pagina en la vista de compatibilidad se vería mal y desordenado en Mozilla, Opera, Netscape...

[luckystrikede11]

Iniciado por kaiseer

Hola Lucystrikede, es cierto. Pero problema ahora, es que si logro que se vea bien la pagina en la vista de compatibilidad se vería mal y desordenado en Mozilla, Opera, Netscape...

vi el sitio (esta bueno el diseño).. pero me di cuenta que usaste espacios para marginar contenido.. eso no hace.. no propio de un diseño puro. si logras estructurar todo con CSS.. de seguro no tendras problema.

PD: si tengo tiempo mañana te puedo colocar algo de codigo.

[kaiseer]

Si, tienes razón.. Voy a comenzar por eso entonces, voy a ver si logro hacerlo sin espacios.. jeje.. gracias.

[kaiseer]

Hola lucky...! Ya he acomodado gran partre de los errores..! casi todo era porque habia colocado en el div del formulario "text-align:center". Esto mozilla lo tomaba solo para textos, mientras que ie 7 y compatibilidad del 8 centraban el texto y las divs tambien. Entonces si le sumas los margenes que habia colocado para que se viese centrado en mozilla y el IE 8 con el modo de compatibilidad desactivado mas el centrado ya hecho con el text-align:center en IE 7 hacia que todo se moviera el doble ..! Se entiende?

Lo único es que quedan 2 cosas a las que no les he encontrado solucion.. Al fondo de arboles arriba, que se ve más hacia la derecha.. y que si le presionas a los inputs de radio (a las V) la pagina se mueve..! sabrás que puedo hacer?