Formato de capas en Mozilla vs IE

dasan · #1 (**permalink**) 11/11/2007, 03:00

Hola a todos

seguramente este tema ya haya sido respondido en el foro, pero he estado buscando y no he encontrado lo que buscaba específicamente.

Es obvio que IE y Mozilla muestran contenidos de formas diferentes con el mismo código, pero me ha sorprendido que lo haga con código sencillo. Me explico, haciendo unas pruebas básicas con capas, elementos <div>, los resultados en un navegador y otro son alarmantemente diferentes. El código es tan sencillo como:

Código HTML:

<div id="parte_superior" style="position:relative; width:80%; background-color: #FFFFFF; border: 1px solid #000000;"> 
  <div id="Menu_esp" style="float:left; width:50%; background-color: #006633; border: 1px none #000000; height: 200;"> 
    primer bloque </div>
  <div id="Menu_esp" style="width:50%; background-color: #FF6633; border: 1px none #000000; height: 200;"> 
    segundo bloque </div>
</div>

Y podéis probar el resultado tan diferente en un navegador y otro en

http://www.s21web.com/pruebas/prueba.html

Tengo varias dudas:

1.) A la hora de diseñar, que navegador debemos tener en cuenta?. Supongo que todos, pero entonces ¿cómo solucionar la intrepretación tan diferente de unos navegadores a otros?
2.) ¿Porque Mozilla no interpreta bien las capas en mi ejemplo?

Espero haber documentado bien el caso

Saludos y gracias!!

webosiris · #2 (**permalink**) 11/11/2007, 03:37

Cita:

height: 200;

te falta la unidad... Firefox es mucho más estricto y interpreta lo que lee... si lee "200", no sabe si son 200cm, 200px o qué...

y sobre tu pregunta 1), lo que yo hago es tener primero en cuenta a los navegadores que soportan bien los estándares web, y después mediante comentarios condicionales arreglar los posibles fallos del ie

dasan · #3 (**permalink**) 11/11/2007, 15:16

Cierto, así ya ha funcionado.

Respecto al otro tema, deduzco que lo que haces es diseñar dos veces la página: una para los navegadores que soportan bien el estandar (Mozilla, Opera, ...) y otra para Internet Explorer ¿cierto?. ¿No es muy lioso?. No me extrañaría que los diseñadores diseñasen sus páginas para aquel navegador con mayor número de usuarios, entiendo que es el caso de IE...

De hecho, según mi ejemplo sencillo, parece que el que no entiene muy bien la CSS es Mozilla...¿porque mete un margen entre el primer y segundo bloque?¿se lo saca de la manga?

Ejemplo: http://www.s21web.com/pruebas/prueba.html

Ahí va el código de CSS:

#zonasuperior {
background-color: #FFFFFF;
position: relative;
border: thin solid #990000;
margin: 0px;
padding: 0px;
}

#zonasuperior p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #003333;
text-decoration: underline;
}

#derecha {
background-color: #006633;
border: 1px none #000000;
height: 200px;
margin: 0px;
padding: 0px;
}

phpIni · #4 (**permalink**) 31/05/2009, 17:11

Yo he hecho una CSS para

phpIni · #5 (**permalink**) 31/05/2009, 18:08

Yo he hecho una CSS para IE y otra para el resto.

He hecho esto al principio de cada página:

Código PHP:

  <?php 
$navegador = getenv("HTTP_USER_AGENT"); 
 
if (preg_match("/MSIE/i", "$navegador")) 
{$html_head="<head><link href=\"defaultR.css\" rel=\"stylesheet\" type=\"text/css\" /></head>";} 
else 
{$html_head="<head><link href=\"defaultR.css\" rel=\"stylesheet\" type=\"text/css\" /></head>";} 
?>

Funciona bien con Safari, IE y Mozilla

Saludos

kseso? · #6 (**permalink**) 31/05/2009, 18:24

"Citizen, levántate y anda" y sonó el despertador y andó

¿no viste la fecha?

phpIni · #7 (**permalink**) 01/06/2009, 06:49

Ya,jeje.. me dí cuenta después, pero luego pensé que se podía qdar ahí para el q lo necesite,no? :$