Re: [Ovillo] Bugs en Firefox
Hola a todos, revivo este tema debido a un excelente articulo que salio en
456 Berea Street, en este hilo, incorrectamente se muestra como un bug la
correcta interpretación del modelo de caja y quisiera aportar este articulo
que muestra el w3c Box Model vs el IE Box model.
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_b
ox_model/
Christian Roque Geldres
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de Lucas Mourelle
Enviado el: lunes, 30 de octubre de 2006 01:24
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Bugs en Firefox
Almirante:
Es tal cual como dice Federico: el doctype es absolutamente necesario
para que el navegador identifique de qué tipo y versión de documento se
trata, y dependiendo de eso cómo debe interpretarlo.
Si bien no es su función, algunos navegadores usan el doctype para
elegir entre dos modos de interpretar el box-model, uno correcto y otro
incorrecto; éste último, para mantener compatibilidad con sitios
desarrollados no acorde a los estándares.
Y para evitarle confusiones a aquellas personas que todavía no manejen
con cierta comodidad el concepto de BoxModel ideado por la W3C, va aquí
un ejemplo:
(espero que no tenga errores, si los tiene, avisen por favor)
http://www.lucasmourelle.com.ar/box_model/
...y un par de puntos importantes a tener en cuenta:
- la propiedad height NO INCLUYE las medidas de: padding-top,
padding-bottom, border-top, border-bottom.
- la propiedad width NO INCLUYE las medidas de: padding-left,
padding-right, border-left, border-right.
Por lo tanto, lo que el Sr. Admirante adjudica como un bug de Firefox es
en realidad la manera CORRECTA de interpretar código CSS. Y, como bien
dice Federico, es la misma manera de interpretar que utiliza el Internet
Explorer 6 (o superior) si el archivo tiene un Doctype moderno.
Uno puede pensar que la manera en que se pensó el asunto de las medidas
de ancho y alto del box-model no es la más intuitiva. Al principio
resulta un poco rebuscada, pero con el tiempo uno va notando que no es
un problema. Simplemente hay que recordar que si uno desea que el borde
de una caja mida, de lado a lado, 100 px, habrá que escribir el width
restando el borde de ambos lados, y el padding de ambos lados... por
ejemplo:
SI QUIERO QUE LA SIGUIENTE CAJA MIDA 100 px. DE BORDE A BORDE... tal que:
#caja{
padding: 10px;
border: 2px solid #FF;
}
ENTONCES EL WIDTH DEBERÁ SER = 100 - 10 - 10 - 2 - 2
#caja{
padding: 10px;
border: 2px solid #FF;
width: 76px;
}
De esta manera, el área donde vive el contenido mide 76px de ancho,
pero sumando el padding y los bordes la caja queda con un total de 100px
de ancho.
...espero que sirva a quienes no utilicen mucho CSS.
saludos,
Lucas
--
===
LucasMourelle - desarrollos rgb
===
6343-1705 // 15-5052-1468
[EMAIL PROTECTED]
===
Federico Santoalla wrote:
Estimado Almirante, paso a contestarte:
El 30/10/06, LISTAS[EMAIL PROTECTED] escribió:
Querido Federico: un código bien interpretado no debería requerir
necesariamente un DOCTYPE cuando el comportamiento que de él se espera
sea
obvio, genérico y estándar. El color red es común a todo navegador y
ninguno lo interpretaría como green.
¿Adivina qué? Para que cualquier agente de usuarios (Navegador o
cualquier cosa que lea el html) se entere de como tiene que
interpretar es documento es necesario poner un DOCTYPE. ¿Adivina que
significa? Tipo de documento. En el se identifica la versión HTML
(HTML 4.01 / XHTML 1.0 /etc) y el modo de tratarlo
(estricto/transicional).
Lo del DOCTYPE estricto te lo digo porque de esta manera IE6
interpreta de manera correcta (correcta porque es lo que dice W3C) el
modelo de cajas.
Y por favor, no cierres el tema porque para aquel que esta aprendiendo
queda confuso. Esto no es un BUG y sería útil para aquellos que se
inician en el diseño basado en estándares que reconozcas tu error.
Un Abrazo.
Federico
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bugs en Firefox
Querido Federico: un código bien interpretado no debería requerir necesariamente un DOCTYPE cuando el comportamiento que de él se espera sea obvio, genérico y estándar. El color red es común a todo navegador y ninguno lo interpretaría como green. No obstante ello, quiero aclararte un par de cosas al respecto: 1°: El 100% de 100% es... ¿adivina qué? 100%. De modo que con DOCTYPE esa regla no se cumple y el height actúa como si fuera declarado auto, es decir que el 100% de 100% aquí pareciera ser !100% (y de hecho lo es); 2°: Sin DOCTYPE tanpoco se cumple la regla y tanto en Firefox como en Opera es 100% + n. De modo que no hay modo (frase existencialista) y estamos hablando de un comportamiento caprichoso que, en mi mediocre planeta es llamado fallo. En lenguaje científico, para que una cosa sea la regla debe darse en todos los casos por igual sin distinción, de lo contrario, falla y la regla no se cumple (bug). Casi por último: el enlace que adjuntas (http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions) ya fue explicado en el e-mail anterior, por lo que deberías actualizar tu correo antes de retrucar... ;) Y ahora sí, por último: que no esté en la lista de bugs de Firefox no significa que no exista, en todo caso, está esperando que cada cual reporte lo suyo... Atte. y cerrando el tema, te agradezco tanta diligencia al respecto. Almirante von Web/. _ P.D.: Lo de malicioso padding es un descuido de mi parte: ese título quedó pegado de un código anterior sobre el que escribí el que envié a la lista, y a efectos del ejemplo, no guarda la menor relación; por lo tanto, no tiene la menor relevancia. Preferiría en todo caso hablar de alto caprichoso. De todos modos, veo que a ti te ha causado un amarillento estupor... :) - Original Message - From: Federico Santoalla [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Sunday, October 29, 2006 10:16 PM Subject: Re: [Ovillo] Bugs en Firefox Oiga Don Listas y/o Almirante, paso a responderle: El 27/10/06, LISTAS[EMAIL PROTECTED] escribió: Vamos por partes: 1) El amarillismo no es lo mío, y el modelo de cajas no está respetado según consta en el mismísimo enlace que has enviado... ;) Títulos como Malicioso padding son de la prensa amarilla. 2) Convengamos en que Firefox no es el paradigma de lo perfecto y ningún navegador lo es, ergo: Nadie dijo que el Firefox sea perfecto consulte en bugzilla[1] 3) Explorer no es el cuco de la web y algunas cosas se ajustan al estándar allí en donde otro no, como en el caso de este ejemplo que les envié. Yo si creo que el el cuco de la web. :) Es un fallo de Firefox (bug) y ni dudarlo. Lo único que faltaría es que escondamos la basura bajo la alfombra... Dejemos de hablar de Firefox, hablemos del Opera ¿para usted tambien es un bug del Opera? El comportamiento es exactamente el mismo. Los errores se corrijen, antes que nada y como actitud adulta, admitiéndolos. ¿A que se refiere? Yo conozco muchos errores de Firefox; de hecho, algunos los he reportado en una lista de colaboradores delmismo y me han pasado el visto bueno, o sea: no soy un microsofiano invasor sino un colaborador del -a mi entender- mejor navegador del mundo. Pero ser el mejor no implica ser lo perfecto. Lo felicito por ello (sin ironías), realmente felicito que pueda colaborar con un proyecto libre. Claro que sería más adecuado el estilo gramatical que sugieres y te agradezco la sugerencia. Pero insisto: este no es el caso. No obstante, yo envié algo con un problema de Firefox sobre el height en tal y cual circunstancia... En fin, en este bug, Firefox se come exactamente la medida relativa a la barra de scroll horizontal inferior,que es lo que queda solapado. Un abrazo y espero haberme expresado correcta y respetuosamente: Almirante von Web/. Creo que debería quedar claro, sobre todo para los que se inician en esto, que eso NO ES UN BUG, que es el comportamiento correcto según nuestra ley, la w3c [2] y que su código de pruebas no es valido, pues carece de DOCTYPE. Con un DOCTYPE strict testeado en IE6 FF2 y Opera 8.5 funciona de mil maravillas. [1] https://bugzilla.mozilla.org/ [2] http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions Un Abrazo. y espero que con actitud adulta pueda admitir que esta equivocado. Federico. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bugs en Firefox
LISTAS escribió: 1°: El 100% de 100% es... ¿adivina qué? 100%. De modo que con DOCTYPE esa regla no se cumple y el height actúa como si fuera declarado auto, es decir que el 100% de 100% aquí pareciera ser !100% (y de hecho lo es); El 100% más 20px por arriba más otros 20px por abajo de padding es, lo has adivinado, más que el 100%. El modelo de caja es el que es, y está muy bien explicado en la especificación [1], de verdad, muy claramente explicado. Otra cosa es que no simpatices con él, no te guste o no lo entiendas, pero acusar de un bug a un navegador por interpretar correctamente el modelo de caja me parece, como poco, atrevido. Claro, que siempre nos queda la opción de que todo el mundo esté equivocado menos tú. [1] http://www.w3.org/TR/CSS21/box.html saludos -- Ramón demasiado viejo para ser una joven promesa, demasiado joven para ser una vieja gloria, pero aún así trabajando duro para Simplelógica: apariencia, experiencia y comunicación en la web http://simplelogica.net # (+34) 98 522 12 65 http://simplelogica.net/caoticoneutral/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bugs en Firefox
Estimado Almirante, paso a contestarte: El 30/10/06, LISTAS[EMAIL PROTECTED] escribió: Querido Federico: un código bien interpretado no debería requerir necesariamente un DOCTYPE cuando el comportamiento que de él se espera sea obvio, genérico y estándar. El color red es común a todo navegador y ninguno lo interpretaría como green. ¿Adivina qué? Para que cualquier agente de usuarios (Navegador o cualquier cosa que lea el html) se entere de como tiene que interpretar es documento es necesario poner un DOCTYPE. ¿Adivina que significa? Tipo de documento. En el se identifica la versión HTML (HTML 4.01 / XHTML 1.0 /etc) y el modo de tratarlo (estricto/transicional). Lo del DOCTYPE estricto te lo digo porque de esta manera IE6 interpreta de manera correcta (correcta porque es lo que dice W3C) el modelo de cajas. Y por favor, no cierres el tema porque para aquel que esta aprendiendo queda confuso. Esto no es un BUG y sería útil para aquellos que se inician en el diseño basado en estándares que reconozcas tu error. Un Abrazo. Federico ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bugs en Firefox
Almirante:
Es tal cual como dice Federico: el doctype es absolutamente necesario
para que el navegador identifique de qué tipo y versión de documento se
trata, y dependiendo de eso cómo debe interpretarlo.
Si bien no es su función, algunos navegadores usan el doctype para
elegir entre dos modos de interpretar el box-model, uno correcto y otro
incorrecto; éste último, para mantener compatibilidad con sitios
desarrollados no acorde a los estándares.
Y para evitarle confusiones a aquellas personas que todavía no manejen
con cierta comodidad el concepto de BoxModel ideado por la W3C, va aquí
un ejemplo:
(espero que no tenga errores, si los tiene, avisen por favor)
http://www.lucasmourelle.com.ar/box_model/
...y un par de puntos importantes a tener en cuenta:
- la propiedad height NO INCLUYE las medidas de: padding-top,
padding-bottom, border-top, border-bottom.
- la propiedad width NO INCLUYE las medidas de: padding-left,
padding-right, border-left, border-right.
Por lo tanto, lo que el Sr. Admirante adjudica como un bug de Firefox es
—en realidad— la manera CORRECTA de interpretar código CSS. Y, como bien
dice Federico, es la misma manera de interpretar que utiliza el Internet
Explorer 6 (o superior) si el archivo tiene un Doctype moderno.
Uno puede pensar que la manera en que se pensó el asunto de las medidas
de ancho y alto del box-model no es la más intuitiva. Al principio
resulta un poco rebuscada, pero con el tiempo uno va notando que no es
un problema. Simplemente hay que recordar que si uno desea que el borde
de una caja mida, de lado a lado, 100 px, habrá que escribir el width
restando el borde de ambos lados, y el padding de ambos lados... por
ejemplo:
SI QUIERO QUE LA SIGUIENTE CAJA MIDA 100 px. DE BORDE A BORDE... tal que:
#caja{
padding: 10px;
border: 2px solid #FF;
}
ENTONCES EL WIDTH DEBERÁ SER = 100 - 10 - 10 - 2 - 2
#caja{
padding: 10px;
border: 2px solid #FF;
width: 76px;
}
De esta manera, el área donde vive el contenido mide 76px de ancho,
pero sumando el padding y los bordes la caja queda con un total de 100px
de ancho.
...espero que sirva a quienes no utilicen mucho CSS.
saludos,
Lucas
--
===
LucasMourelle - desarrollos rgb
===
6343-1705 // 15-5052-1468
[EMAIL PROTECTED]
===
Federico Santoalla wrote:
Estimado Almirante, paso a contestarte:
El 30/10/06, LISTAS[EMAIL PROTECTED] escribió:
Querido Federico: un código bien interpretado no debería requerir
necesariamente un DOCTYPE cuando el comportamiento que de él se espera sea
obvio, genérico y estándar. El color red es común a todo navegador y
ninguno lo interpretaría como green.
¿Adivina qué? Para que cualquier agente de usuarios (Navegador o
cualquier cosa que lea el html) se entere de como tiene que
interpretar es documento es necesario poner un DOCTYPE. ¿Adivina que
significa? Tipo de documento. En el se identifica la versión HTML
(HTML 4.01 / XHTML 1.0 /etc) y el modo de tratarlo
(estricto/transicional).
Lo del DOCTYPE estricto te lo digo porque de esta manera IE6
interpreta de manera correcta (correcta porque es lo que dice W3C) el
modelo de cajas.
Y por favor, no cierres el tema porque para aquel que esta aprendiendo
queda confuso. Esto no es un BUG y sería útil para aquellos que se
inician en el diseño basado en estándares que reconozcas tu error.
Un Abrazo.
Federico
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bugs en Firefox
Hola a todos. Ante todo mis más sinceras disculpas si me estoy entrometiendo
en una discusión privada, aunque observando que los mensajes se publican en
la lista en lugar de por correo privado, concluyo que el debate es de
carácter de libre participación.
On 10/30/06, LISTAS [EMAIL PROTECTED] wrote:
Querido Federico: un código bien interpretado no debería requerir
necesariamente un DOCTYPE cuando el comportamiento que de él se espera sea
obvio, genérico y estándar. El color red es común a todo navegador y
ninguno lo interpretaría como green.
Efectivamente el DTD no nos indica nada sobre el modo de representación
(render) del código que le pasamos, si no que, como todos sabemos,
especifica la estructura correcta, elementos y atributos de un tipo de HTML
[1]. Sin este DTD estaríamos trabajando, teóricamente, con un fichero de
texto con elementos no reconocidos, pero que __podríamos__ representar
(hablando desde el punto de vista del navegador) siguiendo las
recomendaciones de la w3c en estos casos [2]. Recalco lo de __podríamos__
porque no he conseguido encontrar ningún punto en la referencia oficial que
no obligue al navegador a, simplemente, mostrar el texto tal cual, como la
lista de la compra o, porque no, como un árbol XML (en el caso de que se
pudiera crear).
La fundación Mozilla prefiere en estos casos en los que no encuentra una
DTD, (porque recordemos puede elegir hacer lo que quiera con ese contenido),
representar el contenido en su modo quirks [3] en beneficio de la comunidad,
dado que han constatado que la mayoría de páginas web que obvian el DTD no
se representan correctamente en modo estándar [4].El navegador Opera, según
recuerdo, en sus versiones anteriores intentaba funcionar siempre en modo
estándar, fuera cual fuera el DTD.
Una vez conectados estos puntos es sencillo llegar a la conclusión de que si
no se especifica DTD no podemos esperar una respuesta estándar de ningún
navegador, quedando fuera de contexto conclusiones sobre cosas comunes a
todo navegador :?
No obstante ello, quiero aclararte un par de cosas al respecto:
1°: El 100% de 100% es... ¿adivina qué? 100%.
De modo que con DOCTYPE esa regla no se cumple y el height actúa como si
fuera declarado auto, es decir que el 100% de 100% aquí pareciera ser
!100% (y de hecho lo es);
No entiendo que quieres decir aquí. La especificación dice:
1. que los valores relativos deben de convertirse a absolutos, [5]
2. que las alturas expresadas en porcentaje son calculadas en base a su
padre directo. [6] (como padre del elemento raíz tenemos el Viewport [7])
Si de esta manera no se consigue una altura en medidas absolutas se tratará
el atributo como si fuera especificado 'auto'.
Digamos que especificas una altura del 100% en el elemento raíz (HTML), este
podrá generar una medida absoluta, ya que conoce la altura absoluta de su
padre (Viewport). Tras esto, especificando en el elemento BODY de nuevo una
altura de 100%, este será capaz de convertirlo a una medida absoluta ya que,
de nuevo, su padre (HTML) ya posee un valor calculado. De esta manera se
continuaría todo la jerarquía de elementos.
Si, por el contrario, el elemento padre de un elemento dado, no tiene una
altura absoluta especificada o calculada, como es el caso que propones, sus
hijos directos, automáticamente, tedrán una altura de 'auto' en caso de que
esta altura se les especifique en porcentajes.
2°: Sin DOCTYPE tanpoco se cumple la regla y tanto en Firefox como en Opera
es 100% + n.
Ya sabemos que a efectos prácticos las medidas relativas deben de ser
convertidas en absolutas, con lo cual 100% será convertido automáticamente a
'x' píxeles si procede. También, y como comento un poco más arriba, la
existencia o no del DTD no obliga al navegador a ser o no estándar.
Apurando aún más, la w3c nos indica que el elemento HTML pasa a ser el
contenedor del documento HTML cuando, en ese mismo documento, se ha
especificado cualquier tipo de DTD. En caso contrario podemos imaginar como
válida cualquier tipo de jerarquía asimilada por el navegador, y por tanto
cualquier tipo de comportamiento en el momento de calcular los valores
absolutos para las medidas en sus atributos [8] aunque, como ya imaginamos,
este comportamiento viene incluido de serie en el modo quirks.
Para finalizar, como curiosidad puedes probar, tras asignar al documento un
DTD correcto, a añadir la siguiente línea en la hoja de estilos:
html, body { height: 100% }
y comprobarás que en los tres navegadores más usados (IE, FF y Opera) se ven
casi igual, con la única diferencia que en IE los contenedores superiores
'HTML' y 'BODY' se expanden automáticamente en vertical, cuando esto es un
comportamiento totalmente incorrecto. Lo correcto es la representación del
FF y Opera, que desbordan (overflow) el BODY y no muestran el margen
inferior en la pantalla. Si le asignamos la propiedad 'overflow: hidden' a
'BODY', afortunadamente, los tres navegadores se comportan de manera similar
y correcta.
(Me tomo la
Re: [Ovillo] Bugs en Firefox
Oiga Don Listas y/o Almirante, paso a responderle: El 27/10/06, LISTAS[EMAIL PROTECTED] escribió: Vamos por partes: 1) El amarillismo no es lo mío, y el modelo de cajas no está respetado según consta en el mismísimo enlace que has enviado... ;) Títulos como Malicioso padding son de la prensa amarilla. 2) Convengamos en que Firefox no es el paradigma de lo perfecto y ningún navegador lo es, ergo: Nadie dijo que el Firefox sea perfecto consulte en bugzilla[1] 3) Explorer no es el cuco de la web y algunas cosas se ajustan al estándar allí en donde otro no, como en el caso de este ejemplo que les envié. Yo si creo que el el cuco de la web. :) Es un fallo de Firefox (bug) y ni dudarlo. Lo único que faltaría es que escondamos la basura bajo la alfombra... Dejemos de hablar de Firefox, hablemos del Opera ¿para usted tambien es un bug del Opera? El comportamiento es exactamente el mismo. Los errores se corrijen, antes que nada y como actitud adulta, admitiéndolos. ¿A que se refiere? Yo conozco muchos errores de Firefox; de hecho, algunos los he reportado en una lista de colaboradores delmismo y me han pasado el visto bueno, o sea: no soy un microsofiano invasor sino un colaborador del -a mi entender- mejor navegador del mundo. Pero ser el mejor no implica ser lo perfecto. Lo felicito por ello (sin ironías), realmente felicito que pueda colaborar con un proyecto libre. Claro que sería más adecuado el estilo gramatical que sugieres y te agradezco la sugerencia. Pero insisto: este no es el caso. No obstante, yo envié algo con un problema de Firefox sobre el height en tal y cual circunstancia... En fin, en este bug, Firefox se come exactamente la medida relativa a la barra de scroll horizontal inferior,que es lo que queda solapado. Un abrazo y espero haberme expresado correcta y respetuosamente: Almirante von Web/. Creo que debería quedar claro, sobre todo para los que se inician en esto, que eso NO ES UN BUG, que es el comportamiento correcto según nuestra ley, la w3c [2] y que su código de pruebas no es valido, pues carece de DOCTYPE. Con un DOCTYPE strict testeado en IE6 FF2 y Opera 8.5 funciona de mil maravillas. [1] https://bugzilla.mozilla.org/ [2] http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions Un Abrazo. y espero que con actitud adulta pueda admitir que esta equivocado. Federico. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bugs en Firefox
No comprendo que tú no comprendas que no se puede traducir literalmente del inglés: width of containing block como ancho del bloque de contención. Porque en realidad, si leemos bien, deduciremos que falta un concepto: total; por lo tanto, la frase castellanizada correcta sería: ancho 'total' del bloque de contención. Te preguntarás cuál es la diferencia. Y yo trataré de darte la explicación correcta. El ancho de un objeto no es lo mismo que el ancho del espacio global de este objeto. Dicho de otro modo: una caja de 200ene (en donde ene es cualquier unidad de medida) en un punto equis del espacio ocupa exactamente 200ene, pero si además de ello, el objeto conlleva una periferia externa de 20ene, el ancho global de este objeto es 200+20+20ene = 240ene. Eso quiere decir que esa periferia marginal externa (envolvencia) suma espacio no sólido al objeto (no, no es espacio virtual sino abstracto). ¡Pero nuestro objeto sólido ocupa 200ene y no 240ene! Es lo mismo que el wrapping de una imagen insertada en un bloque de texto: la imagen tiene 200ene, pero para que no se le pegue el texto creamos una calle alrededor de nuestra imagen, por lo tanto, el espacio físico común a la imagen es de 200ene + el de las calles externas (medianiles). Entonces diríamos que nuestra imagen necesita un ancho de 240ene para existir sin conflicto con el entorno. Suena gracioso, pero es así física de por medio. Todo lo antedicho es lo mismo que esto: X = margen externo izquierdo + borde izquierdo + margen interior izquierdo + ancho de la caja + margen interior derecho + borde derecho + margen externo derecho por lo tanto: X = ancho total del bloque de contención Que, en definitiva, es lo mismo que esto: 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block Pero hete aquí que nada explica el bug que les envié. Que sí es un bug porque (y lo dije en otro e-mail) se come el espacio físico que ocupa la barra de desplazamiento (scroll) inferior, que mide, aproximadamente 23px si mal no recuerdo. Y si con todo esto no queda claro que no estoy jugando al amarillismo... no sé... tampoco me preocupa, ya que yo puedo resolver un error a partir de reconocerlo y otros no pueden resolverlo porque antes que nada no lo reconocen como un error de interpretación y van a la iglesia a confesar una culpa que no tienen (un poco de humor no viene nada mal). Buen fin de semana. Almirante von Web/. - Original Message - From: oberon [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Saturday, October 28, 2006 12:26 AM Subject: Re: [Ovillo] Bugs en Firefox LISTAS a écrit : Vamos por partes: 1) El amarillismo no es lo mío, y el modelo de cajas no está respetado según consta en el mismísimo enlace que has enviado... ;) 2) En ese artículo hay una frase errónea o mal expresada en relación al ejemplo: width se refiere al ancho del contenido, height al alto. Error: el ancho, tanto como el alto del contenido son la caja y no el corte, si lo decimos al modo editorial. Esto es: lo que delimita el padding. De ahí el croquis que envié; el ancho y el alto del TOTAL es el contenedor y no el contenido. El contenido, como su nombre lo indica, es lo que contiene el contenedor; por caso un DIV. Qué es lo que no comprendes en la ecuacion siguiente ?: 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block Pascal ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bugs en Firefox
¿Eso es un bug?? Yo pensaba que el padding (y el margin) se suma al width y al
height. Luego estarías poniendo height:100%+20px
¿o no es así??
From: [EMAIL PROTECTED] To: ovillo@lists.ovillo.org Date: Fri, 27 Oct 2006
13:36:13 -0300 Subject: [Ovillo] Bugs en Firefox Aquí tienen otro bug en
Firefox: html head titleMalicioso padding.../title style
body {margin: 10px} #truco {background: yellow; width: 150px; height: 100%;
padding: 20px} /style /head body bgcolor=#cc div
id=trucoAbajo, no debería desbordarse... pero se desborda/div /body
/html Si quitan el padding... magia, no se desborda. Almirante von
Web/. ___ Lista de
distribución Ovillo Para escribir a la lista, envia un correo a
Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la
siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
_
¡Ya está aquí Windows Live Spaces! Ahora podrás crear fácilmente tu propio
sitio Web.
http://spaces.live.com/signup.aspx
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bugs en Firefox
margin||---padding---||---margin
Observa que si tienes un objeto de 200px de ancho, los 200px corresponden al
corte del contenedor y no a la caja. Es igual a un diario: tienes el corte
del papel y la caja de impresión. El blanco alrededor de la caja es el padding.
__
| |
| || |
| || |
| |-- caja --| |
| || |
| || |
|__|
- corte --
El padding no se suma al ancho del objeto, se resta de la caja... Por lo tanto
lo que tú haces es parchear el bug.
Almirante von Web/.
- Original Message -
From: Raul Gomez [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Friday, October 27, 2006 1:39 PM
Subject: Re: [Ovillo] Bugs en Firefox
¿Eso es un bug?? Yo pensaba que el padding (y el margin) se suma al width y al
height. Luego estarías poniendo height:100%+20px
¿o no es así??
From: [EMAIL PROTECTED] To: ovillo@lists.ovillo.org Date: Fri, 27 Oct 2006
13:36:13 -0300 Subject: [Ovillo] Bugs en Firefox Aquí tienen otro bug en
Firefox: html head titleMalicioso padding.../title style
body {margin: 10px} #truco {background: yellow; width: 150px; height: 100%;
padding: 20px} /style /head body bgcolor=#cc div
id=trucoAbajo, no debería desbordarse... pero se desborda/div /body
/html Si quitan el padding... magia, no se desborda.. Almirante von
Web/. ___ Lista de
distribución Ovillo Para escribir a la lista, envia un correo a
Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la
siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
_
¡Ya está aquí Windows Live Spaces! Ahora podrás crear fácilmente tu propio
sitio Web.
http://spaces.live.com/signup.aspx
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bugs en Firefox
Le 27/10/2006 18:52, LISTAS a ecrit : margin||---padding---||---margin Observa que si tienes un objeto de 200px de ancho, los 200px corresponden al corte del contenedor y no a la caja. Es igual a un diario: tienes el corte del papel y la caja de impresión. El blanco alrededor de la caja es el padding. __ | | | || | | || | | |-- caja --| | | || | | || | |__| - corte -- El padding no se suma al ancho del objeto, se resta de la caja... Por lo tanto lo que tú haces es parchear el bug. Almirante von Web/. Totalemente falso : http://www.w3.org/TR/CSS21/visudet.html#blockwidth pascal ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bugs en Firefox
Raul Gomez escribió: ¿Eso es un bug?? Yo pensaba que el padding (y el margin) se suma al width y al height. Luego estarías poniendo height:100%+20px estás en lo cierto. los que no lo hacen así son los explorer 5. no hay mas que ver que precisamente al quitarle el padding de 20 se desoborda... podéis probar a poner colores de fondo a la capa en cuestión y lo veréis mejor... ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bugs en Firefox
Recomiendo una lectura básica para entender el modelo de caja, escrito
por una colistera [1].
También es recomendable dejar el amarillismo de lado y no acusar de
bug a un comportamiento que es el correcto.
Sería mejor preguntar de la siguiente manera: Me ocurre esto y esto
en X navegador, es algún error en mi código o se trataría de un bug?.
[1] http://www.disenorama.com/articulos/el-modelo-de-cajas-en-CSS
Un Abrazo.
Federico.
El 27/10/06, LISTAS[EMAIL PROTECTED] escribió:
Aquí tienen otro bug en Firefox:
html
head
titleMalicioso padding.../title
style
body {margin: 10px}
#truco {background: yellow; width: 150px; height: 100%; padding: 20px}
/style
/head
body bgcolor=#cc
div id=trucoAbajo, no debería desbordarse... pero se desborda/div
/body
/html
Si quitan el padding... magia, no se desborda.
Almirante von Web/.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bugs en Firefox
Vamos por partes:
1) El amarillismo no es lo mío, y el modelo de cajas no está respetado según
consta en el mismísimo enlace que has enviado... ;)
2) En ese artículo hay una frase errónea o mal expresada en relación al
ejemplo: width se refiere al ancho del contenido, height al alto. Error: el
ancho, tanto como el alto del contenido son la caja y no el corte, si lo
decimos al modo editorial. Esto es: lo que delimita el padding. De ahí el
croquis que envié; el ancho y el alto del TOTAL es el contenedor y no el
contenido. El contenido, como su nombre lo indica, es lo que contiene el
contenedor; por caso un DIV.
2) Convengamos en que Firefox no es el paradigma de lo perfecto y ningún
navegador lo es, ergo:
3) Explorer no es el cuco de la web y algunas cosas se ajustan al estándar allí
en donde otro no, como en el caso de este ejemplo que les envié.
Es un fallo de Firefox (bug) y ni dudarlo. Lo único que faltaría es que
escondamos la basura bajo la alfombra...
Los errores se corrijen, antes que nada y como actitud adulta, admitiéndolos.
Yo conozco muchos errores de Firefox; de hecho, algunos los he reportado en una
lista de colaboradores delmismo y me han pasado el visto bueno, o sea: no soy
un microsofiano invasor sino un colaborador del -a mi entender- mejor navegador
del mundo. Pero ser el mejor no implica ser lo perfecto.
Claro que sería más adecuado el estilo gramatical que sugieres y te agradezco
la sugerencia. Pero insisto: este no es el caso.
No obstante, yo envié algo con un problema de Firefox sobre el height en tal y
cual circunstancia... En fin, en este bug, Firefox se come exactamente la
medida relativa a la barra de scroll horizontal inferior,que es lo que queda
solapado.
Un abrazo y espero haberme expresado correcta y respetuosamente:
Almirante von Web/.
- Original Message -
From: Federico Santoalla [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Friday, October 27, 2006 3:00 PM
Subject: Re: [Ovillo] Bugs en Firefox
Recomiendo una lectura básica para entender el modelo de caja, escrito
por una colistera [1].
También es recomendable dejar el amarillismo de lado y no acusar de
bug a un comportamiento que es el correcto.
Sería mejor preguntar de la siguiente manera: Me ocurre esto y esto
en X navegador, es algún error en mi código o se trataría de un bug?.
[1] http://www.disenorama.com/articulos/el-modelo-de-cajas-en-CSS
Un Abrazo.
Federico.
El 27/10/06, LISTAS[EMAIL PROTECTED] escribió:
Aquí tienen otro bug en Firefox:
html
head
titleMalicioso padding.../title
style
body {margin: 10px}
#truco {background: yellow; width: 150px; height: 100%; padding: 20px}
/style
/head
body bgcolor=#cc
div id=trucoAbajo, no debería desbordarse... pero se desborda/div
/body
/html
Si quitan el padding... magia, no se desborda.
Almirante von Web/.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bugs en Firefox
LISTAS a écrit : Vamos por partes: 1) El amarillismo no es lo mío, y el modelo de cajas no está respetado según consta en el mismísimo enlace que has enviado... ;) 2) En ese artículo hay una frase errónea o mal expresada en relación al ejemplo: width se refiere al ancho del contenido, height al alto. Error: el ancho, tanto como el alto del contenido son la caja y no el corte, si lo decimos al modo editorial. Esto es: lo que delimita el padding. De ahí el croquis que envié; el ancho y el alto del TOTAL es el contenedor y no el contenido. El contenido, como su nombre lo indica, es lo que contiene el contenedor; por caso un DIV. Qué es lo que no comprendes en la ecuacion siguiente ?: 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block Pascal ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
