Diferencia IE 7 y firefox3

Pues el caso es que estaba escribiendo con el dreamweaver el html y css de una página y todo perfecto. Siempre que previsualizaba se veia como yo quería, claro que siempre previsualizaba con firefox que sale por defecto.

De repente se me ocurre comprobar a ver como funciona con el explorer... ¡¡¡madre mia!!! Menuda patata de página que se veía. Al final lo he conseguido medio apañar para que se vea bien en los dos a falta de una cosa.

Le he dado un ancho concreto al body (800px) y para que me salga centrado le digo que los márgenes sean auto. Pues esto en el explorer no funciona. Creo una div general (que haga las veces del body) y tampoco funciona el "auto". La pregunta sería ¿en el explorer no funciona {margin:auto ;} ?

Ah! Y otra cosa que se me acaba de ocurrir, si yo le digo que width:800px no me tiene que ocupar toda la pantalla, aunque se quede a la derecha debería ser más pequeño. Pues eso en el explorer se ve que tampoco lo reconoce.

Davidid escribió:Pues el caso es que estaba escribiendo con el dreamweaver el html y css de una página y todo perfecto. Siempre que previsualizaba se veia como yo quería, claro que siempre previsualizaba con firefox que sale por defecto.

De repente se me ocurre comprobar a ver como funciona con el explorer... ¡¡¡madre mia!!! Menuda patata de página que se veía. Al final lo he conseguido medio apañar para que se vea bien en los dos a falta de una cosa.

Le he dado un ancho concreto al body (800px) y para que me salga centrado le digo que los márgenes sean auto. Pues esto en el explorer no funciona. Creo una div general (que haga las veces del body) y tampoco funciona el "auto". La pregunta sería ¿en el explorer no funciona {margin:auto ;} ?

Ah! Y otra cosa que se me acaba de ocurrir, si yo le digo que width:800px no me tiene que ocupar toda la pantalla, aunque se quede a la derecha debería ser más pequeño. Pues eso en el explorer se ve que tampoco lo reconoce.

Hola:
Por lo que yo entiendo, el body (que es toda la pantalla), siempre está centrado, (ocupando toda la pantalla). Lo que puede o no puede estar centrado es lo que se pone dentro del body, (como capas, textos, imagenes, etc.). Veo muy difícil, (para los sucesivos trabajos que se harán dentro del body) que se le pueda poner una medida en píxeles que sean menor que la pantalla en que se va a visualizar.
Por defecto , si no se le dice otra cosa al body, todo le que se ponga dentro de el tomará el curso de flujo normal de una pagina, o sea tomará como principio la parte superior izquierda. Considero irrelevante que se le ponga al body un auto, cuando por defecto ya lo está. Por ejemplo, si mi pantalla mide 15 pulgadas, el body medirá 15 pulgadas, si mi pantalla mide 19 pulgadas, el body medirá 19 pulgadas, lo que se mantendrá (en terminos generales, para no entrar en profundidad) es la medida que le daré a la capa que usaré dentro del body para meter allí todo lo demás, por esa razón en el curso hacemos una capa que mide 800 píxeles de ancho, (capa que va dentro del body) Si mi pantalla "mide" 800 píxeles de ancho, ( que a la vez es el body), esa capa cabrá bastante justa, pero si mi pantalla "mide" 1250 píxeles de ancho, entonces me sobrará body por el lado derecho de esa capa, pero como queremos que esa capa esté centrada, (ya que es mas pequeña que el body) es cuando utilizamos el text-align:center en el body, que hará que el Internet Explorer centre esa capa (y todo lo demás), y para que cuando la veamos con el Firefox, entonces le diremos a esa capa que tenga un margin auto.
si usted crea una capa dentro del body, que esa capa mida 800 píxeles de ancho y dentro de esa capa crea dos capas, una al lado de la otra, y a cada capa le dice que ocupe el width 50%, entonces cada capa medirá 400 píxeles de ancho, porque están dentro de una capa que mide 800píxeles. Pero si usted en el body (que es toda la pantalla, crea esas mismas dos capas, una al lado de la otra y les da el mismo width 50%, cada capa ocupará la mitad del body.
El body también es una capa, solo que está delimitada por el ancho de la pantalla (y su resolución).
Bueno, esta explicación ha sido muy por encima, y espero no haberle dejado mas dudas.
Saludos

Davidid escribió:Pues el caso es que estaba escribiendo con el dreamweaver el html y css de una página y todo perfecto. Siempre que previsualizaba se veia como yo quería, claro que siempre previsualizaba con firefox que sale por defecto.

De repente se me ocurre comprobar a ver como funciona con el explorer... ¡¡¡madre mia!!! Menuda patata de página que se veía. Al final lo he conseguido medio apañar para que se vea bien en los dos a falta de una cosa.

Le he dado un ancho concreto al body (800px) y para que me salga centrado le digo que los márgenes sean auto. Pues esto en el explorer no funciona. Creo una div general (que haga las veces del body) y tampoco funciona el "auto". La pregunta sería ¿en el explorer no funciona {margin:auto ;} ?

Ah! Y otra cosa que se me acaba de ocurrir, si yo le digo que width:800px no me tiene que ocupar toda la pantalla, aunque se quede a la derecha debería ser más pequeño. Pues eso en el explorer se ve que tampoco lo reconoce.

Hola:
Añadiendo al comentario que le di anteriormente, le daré un ejemplo de como el body puede quedar mas pequeño que la pantalla.
Esta es una página, por ejemplo index.html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Probando los layout</title>
<LINK rel="stylesheet" href="estilo.css" type="text/css" media="all" >
</head>
<body>
<div id="cabecera"><H1>Cabecera</H1></div>
<div id="izquierda">

Esta capa o DIV la tengo a la izquierda, el fondo es de color amarillo, el texto asume el color negro que es el por defecto,
pero le he dado al hover la directiva de que cuando pase el cursor por la capa, esta cambie al color azul manteniéndo el negro del texto</p></div>
<div id="centro">

Esta capa que está en el centro es de color de fondo negro, y el texto lleva el color por defecto tambien es negro</p>


Pero le he dado al div:hover , la directiva de que cuando pase el cursor por esa capa
esta cambie a rojo, el texto sigue manteniendo el color negro que es por defecto, y resalta sobre el color rojo</p></div>
<div id="derecha"><p id="blanco">Esta capa o DIV la tengo puesta a la derecha de las demás, el fondo es color blanco y al texto le he dado una
clase del mismo color, cuando paso el cursor por la capa, esta cambia de color a verde, y el texto que es blanco resalta y es legible</p></div>
<div id="pie">la capa pie le he dado un color de fondo gris</div>
</body>
</html>

Y esta es la hoja de estilo para esa pagina-- estilo.css

H1{font-size:1.2em;color:blue;font-weight:bold;text-decoration:underline;text-align:center}

BODY{margin:10px;font-family:arial, verdana, helvetica, sans-serif;font-size:18px;}

P{text-indent:15px;padding:3px;}

div#cabecera, div#pie{background-color:#CCC;height:50px;clear:both;}

div#izquierda, div#derecha, div#centro{height:460px;}

div#izquierda{float:left;background-color:#FC0;width:20%;}

div#derecha{float:right;background-color:#FFFFFF;width:40%;}

div#centro{float:left;background-color:#000;width:40%;}

div#centro:hover{background-color:#FF3300;}

div#izquierda:hover{background-color:#0000FF;}

div#derecha:hover{background-color:#008000;}

p#blanco {color:#FFFFFF;}

Si se da cuenta, le he puesto al body un margin de 10 píxeles, eso significa que el body tomará un margin por los cuatro costados pero hacia dentro de la pantalla.
Si usted tiene Firefox podrá ver los cambios de color que se producen en las capas izquierda centro y derecha, con Internet Explorer 6 no acepta esos cambios de color, en el Internet 7 no estoy seguro si los acepta (ya que yo no tengo el Internet Explorer 7).
He utilizado un DOCTYPE strict en la pagina como puede notar, pero también funciona con el DOCTYPE Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

La cuestión es que el body está diez píxeles hacia dentro del borde izquierdo de la pantalla y a diez píxeles hacia dentro de la barra de desplazamiento que hay a la derecha, y lo mismo por arriba y por abajo.

En todo caso esto es solo un ejemplo
Saludos