maqueta para todos los navegadores

cristian_cena · #1 (**permalink**) 03/09/2009, 16:38

Hola comunidad!

Determinar el ancho total de los elementos css y el problemas para flotar divs constituyen, a mi parecer, las preguntas más frecuentes en lo que refiere a maquetación con css.

El ancho total esta dado por:
margin + padding + width + border
Pero sucede que no todos los navegadores interpretan del mismo modo la css-box inclusive IE varía su interpretación en sus diferentes versiones.

http://www.forosdelweb.com/f4/altura...3/#post3069751 (post #5)

Preguntas:

1. ¿Porque motivo se ve el fondo azul de #principal?

2. ¿Como harías tu para que esta página se vea igual en firefox, IE 5.5, 6, 7 y 8, Opera, Safari y Chrome?

Restricción: trabajar con la unidad de medida em, o fundamentar la elección de otra.

Aquí la página: http://www.inicio2770.com.ar/ancho_total.html (ver con firefox)

Espero tu ayuda, como seguro muchos otros compañeros del foro

Saludos!

kseso? · #2 (**permalink**) 03/09/2009, 17:06

1: fácil
#principal {
background-color:blue;
...
2: en FF e IE7
si por verse igual entiendes "exactamente igual", es imposible en un 99'9% de los casos
Lo que sí se puede hacer es que se vea razonablemente parecido.
Y en tu caso, la diferencia es la proporción. Debido al distinto tamaño de fuente que pueda estar definida en uno u otro navegador lo que cambia es el tamaño en pixeles de un elemento, pero no la relación que hay entre los distintos elementos.
Para "forzar" a que i66 se "comporte" razonablemente bien, tienes dos opciones (entre otras posibles): utilizar una hoja de estilos específica para contrarrestar ciertos fallos o el famoso js que se ha mencionado varias veces por estos foros.
Y de ie5.5 casi mejor lo olvidas a estas alturas

3: aunque no lo planteas

:
los estilos en el head se colocan entre:
<style type>
</style>
según el doctype declarado.

Un saludo

cristian_cena · #3 (**permalink**) 03/09/2009, 17:44

Hola Kseso?:

1.
Cito: " fácil
#principal {
background-color:blue;"
Lo hice desde un prinicpio solo que en la url que deje veras que ese fondo según los width+margin+paffing+border que aplique a los divs anidados a #principal no tendría porque verse el background-color: blue; de #principal.

2. (para cuidar nuestra salud mental podemos olvidarnos si quieres de IE 5.5 y 6) Cuando dices que la diferencia es la proporcion te refieres a que ¿cada navegador asigna diferente proporcion para em? es decir que FF asigna por ejemplo 16px=1em e IE por ejemplo 14px=1em?

3. el doctype declarado fue
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
y coloco los estilos entre
<style type="text/css"></style>
¿que aconsejas al respecto?

Saludos!

alexk · #4 (**permalink**) 03/09/2009, 18:56

no entiendo nada cual es tu fin? o duda?...

Cita:

¿cada navegador asigna diferente proporcion para em?

no solo para eso sino para muchas otras cosas mas una razon mas para usar un RESET... (y aun asi nos quedamos cortos)

Cita:

es decir que FF asigna por ejemplo 16px=1em e IE por ejemplo 14px=1em?

no me quiero atrever a caer en numeros exactos pero algo asi...

igual podemos tratar para no liarnos mucho con el em...

Código css:

Ver originalbody {font-size: 62.5&#37;;}

y asi
1em = 10px
muy util cuando tenemos diseños fluidos...

y tus estilos deberian estar en un ".css" para no mesclar y tener todo en orden chao y suerte!...

kseso? · #5 (**permalink**) 04/09/2009, 06:29

Sobre el valor em
La referencia como bien dices es la letra M y para calcular el tamaño en px el navegador toma como valor el tamaño especificado por mi (o por ti, o por el visitante) en las opciones de configuración de mi navegador.

Una imagen valdrá más que todo:

En este caso es FF, pero podría ser cualquiera.
El valor señalado es el que se toma como base para calcular el tamaño.

El resto tendrá que esperar, con el funcionamiento del foro es imposible intentar responder nada

Un saludo

alexk · #6 (**permalink**) 04/09/2009, 09:16

wow... se me olvida que el navegador se puede configurar esas cosas pero llevas razon... y tambien con lo del foro que se ta petando

cristian_cena · #7 (**permalink**) 04/09/2009, 17:10

Gracias Kseso? ese era el detalle que me faltaba. y si ya queremos disfrutar del foro a pleno y sin interrupciones (es que nos volvemos un poco adictos jeje).