Problemas de visualización IE vs. Firefox & Chrome

WixTeR · #1 (**permalink**) 07/05/2009, 15:54

Buenas a todos, llevo mucho tiempo visitando este foro y me ha sacado siempre de muchas dudas, pero ahora no encuentro la solución a mi problema. No estoy muy seguro de si el tema va aquí o en CSS, si me he equivocado lo siento.

Estoy remodelando una página web y según en navegador usado el <div> principal que contiene el resto de la página sale centrado o no. Los navegadores que enseñan bien la página son: IE8, Firefox y Chrome y por contra, los que no la muestran bien son: IE6 & IE7

La cosa no es sólo esa, hay una "sub-página" que posee la misma estructura y siempre sale centrada. Todo el <head>, hasta el primer <div> dentro del <body> son iguales en las dos páginas.

Para darle más chicha al asunto, cuando uso el firebug en las dos páginas para ver si encuentro el problema el <div id="wrapper"> en el index.html no me lo detecta (es decir no me lo marca en azul) y en presentacion.html si me lo marca.

La página está validada con el W3C, por lo que fallo de código creo que no es...

Como soy nuevo en el foro, no me deja incluir enlaces a la página e intento meter el código fuente pero tampoco me deja porque también incluye URL's. Como no consigo eliminarlas todas (no se si tengo que quitar todas las etiquetas <a>) voy a poner la página de manera "ilegal" para que podaís ver el codigo fuente
uv.es/calfaro
(lo siento mucho si rompe las normas del foro pero no encuentro otra solución)

Aquí pongo el CSS correspondiente:

Código:

#wrapper{
	margin-top: 70px;
	margin-left: auto;
	margin-right: auto;
	width: 940px;
	text-align: center;
}

#izquierda{
	float: left;
	border: 1px solid #666;
	width: 230px;
	height: 812px;
	position: absolute;
}

#centro{
	float: left;
	margin-left: 242px;
	position: absolute;
	width: 470px;
}

#centro .up{
	border: 1px solid #666;
	height: 260px;
}

#centro .down{
	margin-top: 12px;
	border: 1px solid #666;
	height: 540px;
}

#derecha{
	margin-left: 722px;
	float: left;
	border: 1px solid #666;
	width: 230px;
	height: 812px;
	position: absolute;
}

Espero no haber liado mucho el tema y muchas gracias por vuestra ayuda.

--> EDITO: ¿Puede ser por los div's con position: absolute?

Un saludo

AnesGy · #2 (**permalink**) 10/05/2009, 12:23

A ver, has cogido los 3 mas jodidos. Mozilla es Netescape y Gecko, IE es el chico especial, y Chrome (que es clavadito al safari) es del mismo sistema que los de apple, ahora no recuerdo como se llama.

IE tiene problemas interpretando los márgenes, especialmente los negativos. Mozilla nunca me dio problemas salvo por algunos caprichos (como contentDocument en javascript). Chrome simplemente lo toco al final, por si las moscas, pero parece ser que nunca he encontrado nada raro, si funciona en Firefox, funciona en Chrome (ya Safari me dio una vez problemas). Luego el Opera le voy haciendo filtros para las cosas que no entiende (que solo me ha ocurrido una vez).

El IE8 tiene muchas mejoras respecto de los anteriores. Los anteriores no entienden position: al igual que el resto. De hecho usan un sistema propio. Los márgenes negativos no los entiende.

Hay que hacer filtros en CSS para que lo entienda IE6 y demás.

Cita:

Para darle más chicha al asunto, cuando uso el firebug en las dos páginas para ver si encuentro el problema el <div id="wrapper"> en el index.html no me lo detecta (es decir no me lo marca en azul) y en presentacion.html si me lo marca.

Mira a ver si tiene altura 0. Es muy común si usas todo en float y no pones el <div style="clear:both"></div> o si usas Posiciones absolutas.

Aún así pon imágenes.

hCanté · #3 (**permalink**) 11/05/2009, 09:26

@AnesGy te refieres a webkit?... @WixTeR lo que a mi me ha servido independientemente de tu problema es ir revisando a medida que avanzo en estos y otros navegadores, porque si lo haces cuando tu proyecto esta terminado se puede poner peor el asunto, cuesta más.

Saludos!

Mikmoro · #4 (**permalink**) 11/05/2009, 09:44

Cita:

Iniciado por hCanté

@AnesGy te refieres a webkit?... @WixTeR lo que a mi me ha servido independientemente de tu problema es ir revisando a medida que avanzo en estos y otros navegadores, porque si lo haces cuando tu proyecto esta terminado se puede poner peor el asunto, cuesta más.

Completamente de acuerdo, aunque ahora mismo eso no te aporte nada.
Sí, puede tener que ver con el absolute. De hecho no hay duda.
Pon tu HTML o no podremos saber realmente qué ocurre.