Foros del Web » Creando para Internet » CSS »

IE6 Box Model (width+padding-left)

Estas en el tema de IE6 Box Model (width+padding-left) en el foro de CSS en Foros del Web. Hola! Estoy enfrentandome al problema que tiene IE6 con el modelo de cajas. El problema es que no sé si estoy entendiendolo correctamente y por ...
  #1 (permalink)  
Antiguo 28/10/2008, 00:24
Avatar de Threepwood  
Fecha de Ingreso: febrero-2002
Ubicación: Argentina
Mensajes: 892
Antigüedad: 15 años, 10 meses
Puntos: 3
IE6 Box Model (width+padding-left)

Hola!

Estoy enfrentandome al problema que tiene IE6 con el modelo de cajas. El problema es que no sé si estoy entendiendolo correctamente y por tanto, no sé cómo solucionarlo. Trataré de explicarme:

Según entiendo, para la W3C, el padding es independiente del Width del elemento y asi lo entienden la mayoria de los navegadores (IE7, Firefox, Opera). Si yo tengo una caja que mide 200px y le aplico un padding-left de 20px la caja no crecera a 220 sino permanecera del mismo tamaño.

Ahora bien, IE6 maneja eso de manera diferente. Para él, el padding y border son dependientes del width de la caja. De manera que si tengo una caja que mide 200px y le aplico el mismo padding, la caja crecera a 220px.

¿Entiendo correctamente?

Ahora bien, he estado buscando soluciones y todo parece recidir en quirks mode y standar mode, doctypes y otras hierbas. Lo que yo quiero es que IE6 cambie su modo de interpretar el modelo de cajas al "estandar", pero no sé cómo hacerlo.

Lei por ahí que había que cambiar el doctype a Strict pero nada. Tambiém que había que quitarlo pero evientemente no funcionó.

¿Alguien sabe?

Por favor, si me estyo equivocando completamente, tambipen diganme porque me siento bastante perdido ahira.

Un abrazo

Samuel.
__________________
Equívocos sin importancia
  #2 (permalink)  
Antiguo 28/10/2008, 11:58
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 10 años, 11 meses
Puntos: 1
Respuesta: IE6 Box Model (width+padding-left)

Hola Threepwood, estaría bueno si tenés algún link donde se pueda ver el ejemplo concreto de lo que estas planteando.

De todas maneras si entendí bien tu planteo lo que yo haría (para no volverme más loca...) es poner un parche para IE6 con padding-left: 20px pero el Width:180px, para que justamente al sumarse quede un final de 200 px...

Esto lo podés poner dentro del body del html
Sería algo asi:

<body>
<!--[if IE6]>
<style>

.caja{
width:180px;
height:100px;
padding-left:20px;
}
</style>
<![endif]-->

resto del html.....

</body>


y tu CSSpara el resto de los navegadores:

.caja{
width:200px;
height:100px;
padding-left:20px;
}
  #3 (permalink)  
Antiguo 28/10/2008, 12:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: IE6 Box Model (width+padding-left)

En caso de que fueras a usar ese comentario condicional (<!--[if IE6]>), se pone en el head, y no en el body.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 28/10/2008, 12:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: IE6 Box Model (width+padding-left)

Cita:
Iniciado por Threepwood Ver Mensaje
Según entiendo, para la W3C, el padding es independiente del Width del elemento y asi lo entienden la mayoria de los navegadores (IE7, Firefox, Opera). Si yo tengo una caja que mide 200px y le aplico un padding-left de 20px la caja no crecera a 220 sino permanecera del mismo tamaño.
Creo que es exactamente al revés: el padding es efectivamente independiente del width, por lo que se sumará a éste, de manera que una caja con un acho de 200px y un padding izquierdo de 20px, deberá medir en realidad 220px.

Lo mejor es que lo pruebes con un doctype strict o transitional.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 28/10/2008, 12:23
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 10 años, 11 meses
Puntos: 1
Respuesta: IE6 Box Model (width+padding-left)

La verdad es que no osaría discutir con una eminencia como Mikmoro...
Pero entonces me acabo de enterar que vengo haciendo las cosas al revés hace tiempo, jeje.

Y aunque no lo crean me funciona!!

Sin ir más lejos en el link por el que estoy haciendo una consulta en otro post tengo algunos parches para IE y funcionan.

Les dejo el link:

http://www.estudioblazar.com.ar/inmo...dez/index.html

a menos que estemos hablando de cosas distintas, si es asi, sorry...
  #6 (permalink)  
Antiguo 28/10/2008, 12:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: IE6 Box Model (width+padding-left)

No digo que no vaya a funcionar, pero el sitio correcto es el head, donde se declaran los estilos (como tú misma haces con los estilos .Estilo1, etc.).
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 28/10/2008, 13:05
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 10 años, 11 meses
Puntos: 1
Respuesta: IE6 Box Model (width+padding-left)

Tenés razón, se ve que lo aprendí mal de entrada pòrque siempre los puse dentro del body, sin embargo esos estilos que viste dentro del head en la pág, están ahi porque son cambios a textos, etc que hice desde la ventana de propiedades y no directamente escribiéndolos yo, por lo que se ve que se introdujeron automáticamente donde deben estar. (no se si me explico).

A partir de ahora los pondré dentro del head para hacer las cosas como se deben.
Igualmente se que existen otras formas de poner esos (parches) dentro del css (algo asi como el mismo estilo con un guión bajo delante o algo asi... nunca lo probé pero se que existe...

Pero más allá de eso... no es una solución viable y simple la que planteé al ppio??
  #8 (permalink)  
Antiguo 28/10/2008, 13:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: IE6 Box Model (width+padding-left)

Sí, de hecho suele ser la mejor solución, sólo que a mi entender lo que Threepwood planteaba era si es así la cuestión que pensaba o no, es decir, preguntándose más por la duda en sí que por la solución, o eso me pareció.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 28/10/2008, 14:03
Avatar de Threepwood  
Fecha de Ingreso: febrero-2002
Ubicación: Argentina
Mensajes: 892
Antigüedad: 15 años, 10 meses
Puntos: 3
Respuesta: IE6 Box Model (width+padding-left)

Hola Mikmoro y marilinadg.

Efectivamente, yo preguntaba más bien por si estoy entendido correctamente, pero tambén por una solución. Efectivamente he probado los comentarios condicionales y funcionan, sólo me gustaría saber si hay alguna forma en que, por ejemplo, todos los navegadores apliquen el box-model de una misma manera para, precisamente, no tener que usar esos condicionales.

El doctype, strict o transitional, no modifica nada, según he probado.

Gracias a los dos por los puntos de vista :)

Samuel.
__________________
Equívocos sin importancia
  #10 (permalink)  
Antiguo 28/10/2008, 14:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: IE6 Box Model (width+padding-left)

No, no hay manera; Explorer interpreta el modelo de caja de forma diferente a los demás navegadores. Esto es así y no hay nada que hacer. Pero creo que eso no ocurre precisamente con el padding, sobre lo que tú preguntabas, en el que interpreta las cosas generalmente igual que los demás.

Cita:
El doctype, strict o transitional, no modifica nada, según he probado.
Sí, en general te van a modificar muchas cosas con respecto a no usarlo, y te recomiendo que nunca más los abandones en tus diseños web.

Hay cosas que tienen solución antes de usar los comentarios condicionales. Si concretas la consulta sobre algo específico, quizá haya alguna alternativa compatible.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:54.