Definir CSS diferencial para Explorer y Mozilla
Los que trabajan con CSS saben que el modelo de cajas funciona distinto en Explorer que en Mozilla. El primero ocupa el 'box-model', lo que indica que el tamaño de un bloque (div y derivados) se mide de borde a borde. La W3C señala que el width hace referencia solo al contenido (content-model), por lo que el padding y las lineas se cuentan aparte... poco intuitivo, la verdad.
Ejemplo:
.micajita {
width:100px;
border:1px;
padding:10px;
}
En IE la cajita medirá 100px, en Mozilla medirá ....chachachachán.... ¡111 122 pixels!. Claro, se suma al contenido el borde y el padding.
La forma 'legal' de solucionar esto la pueden encontrar en http://www.quirksmode.org/css/box.html.
La idea es utilizar:
box-sizing: border-box
Dentro del elemento en cuestión, para que adopte el modelo requerido. Mozilla tiene su propia extensión, que reza:
-moz-box-sizing: border-box;
-moz-box-sizing: content-box;
-moz-box-sizing: padding-box;
Nice... el problema es que parece que no funciona con el height. Para solucionar esto, un método sucio, pero eficaz:
.micajita_compatile {
width:89px 78px;
width: expression('100px');
border:1px;
padding:10px;
}
Dios, que es eso? Fácil. La especificación dice que cualquier cosa que no entienda el navegador, se pasa por alto. expression es una función propia de Internet Explorer que permite utilizar javascript para definir un valor dentro del css. Entonces
- Mozilla lee 'width:78px' y pasa por alto el segundo width con signos que el no entiende
- Explorer lee 'width:78px', lee cree, pero después lee expression('100px'), calcula la expresión (que, casualmente, da '100px') y reemplaza la definición anterior
Lindo, no? El único problema es que para cada movimiento del mouse, vuelve a calcular ej javascript para el expression... para otra ocasión dejo la resolución de este problema (que no es mía, por si acaso)
- 11711 lecturas
Buscar
Publicidad
Inicio de sesión
Comentarios recientes
- Hi!
I want to improve my SQL
hace 4 horas 30 mins - Yo estoy en busca de un
hace 13 horas 16 mins - Gracias. Me gustaría que me
hace 6 días 13 horas - Está muy weno el post, me
hace 6 días 14 horas - Gracias por el ofrecimiento,
hace 1 semana 1 día - Hey hola no soy de chile soy
hace 1 semana 2 días - disculpa que haga dos
hace 1 semana 3 días - Con Ices2 solo puedes usar
hace 1 semana 3 días - una pregunta prodria ser una
hace 1 semana 3 días - Me gustaría saber su
hace 2 semanas 1 día
Referencias
Recientemente me he puesto con XHTML y logicamente basaba todo el aspecto en CSS. Supongo que como todo el mundo, me encontré con este problema desde el principio. Pero se me solucionó indicandole un doctype en concreto. Desde entonces, parece que se visualiza igual en IE que en Mozilla.
Eso si, desde que comencé con XHTML+CSS hasta que encontré la solución, pasó mucho tiempo...
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Sí, es una solución buena. El único problemita es que, como soy un purista, si quieres desarrollar en modo estricto, debes HACERLO en modo estricto (ocupar ciertos elementos, otros no, etc.). Ahora bien, cuando comience el siguiente proyecto, intentaré cumplir con las reglas. Por ahora, me quedo en HTML 4.01 transicional.
Internet Explorer 6 entiende correctamente el modelo de cajas, siempre y cuando se utilice un doctype válido (incluida la dtd), el problema son las versiones anteriores.
Un buen método es este (que valida perfectamente como css):
.micajita{
padding:10px;
border:1px;
\width: 111px;
w\idth: 100px;
width: 100px;
}
\width es para IE (5, 5.5, 6), se debe incluir el padding y el border (y el margin si fuese necesario).
w\idth es para el resto de browsers que soportan los estandares.
width es para Opera (solo las versiones mas modernas entienden w\idth).
Lo mismo cuenta para el "height" si la situacion lo requiere.
El problema de la solución que tu das es que no se basa en un estándar, sino en un hack, dependiente del navegador. Como dice Koch en su columna Keep CSS simple, la idea no es arreglar un bug (en este caso, la falta de soporte de CSS estándar para Microsoft) con otro (el procesamiento incorrecto del \ en el width) !
La solución pasa por ocupar hack 'reconocidos' para cada navegador o, mejor aún, apegarse al estándar y ocupar el modo estricto.
Te encuentro toda la razon, en el sentido de que mientras mas simple el css mejor,pero me gustaria hacer algunas observaciones y plantear algunas dudas:
- en tu ejemplo de uso de expression el valor de ese width debe ser 111px y no 100px (tienes que tomar en cuenta el valor del border x 2, y el valor del padding x 2, ya que debes considerar el padding y el border de ambos costados.
- Independiente si se trabaja con un DOCTYPE estricto o transicional (ya sea html o xhtml) Internet Explorer 6 (por lo menos en Win2000) adopta el modelo de cajas estándar. Las versiones anteriores son las que toman el modelo Microsoft (considerando el ancho de borde a borde).
- Eso trae un pequeño inconveniente con el uso de expression, ya que para IE 6 esto no es necesario, pero como igual es capaz de interpretarlo, el efecto final será el contrario: tendremos una caja más grande de lo que qeriamos.
- Es por eso que me parece se hace necesario recurrir al hack que presenté más arriba (y que correjiré enseguida ya que el orden de los factores SÍ altera el producto), por ende yo recurro a esto:
.micajita{
padding:10px;
border:1px;
width:89px;
\width:111px;
w\idth:89px;
}
Para "width" se debe seguir ese estricto orden, ya que algunos navegadores entienden más de 1 de esos atributos:
width:89px lo entiende Firefox, IE 6.0 y Opera.
\width:111px; Este se utiliza especialmente para IE 5 y 5.5
El problema de ese utlimo width, tambien lo entiende Firefox, IE6 y Opera (no me acuerdo desde que version, creo que desde la 7), por lo que hay que volver a setear el valor para esos browsers con:
w\idth:89px
Resumiendo, y si no me condorié, el primer width lo uso para Opera menor a la version 7. El segundo width para IE 5 y 5.5, y el tercer width para el retso de browsers que siguen los estandares correctamente.
Raspu:
Gracias por tus comentarios. Te contesto por partes:
- Tenías razón sobre la equivocación en el ancho del elemento del ejemplo. Claro que no es 111px, son 122px! Claro, es cosa de sumar [borde izq.]+[padding izq]+[contenido]+[padding der.]+[borde der]= 1+10+100+10+1=122. Corregí el artículo para hacer calzar los datos.
- El explorer 6 ha trabajo siempre, para mí, en el modelo de bordes,a menos que le ponga modo estricto. Puede ser que en XHTML automáticamente pase al modelo del estándar. Habría que revisar más en profundidad.
- Claro está, si se ocupa el modelo de contenido, el expression tendrá un efecto distinto al esperado.
- Y me sigue sin gustar el hack, mi estimado. A estas alturas del partido, prefiero trabajar en modo estricto y evitar el trabajar a punta de pixel, limitándome a marcar porcentajes. Si bien no queda tan ajustado, igual se ve bien y nos evitamos estos líos.
Nos vemos!
¿Y en que SO has hecho la prueba del modelo de cajas con IE 6? A mi por lo menos en Windows 2000 siempre me ha funcionado en el modelo estándar, ya sea con XHTML estricto o con HTML transicional. Lo único que necesita es que le indiques un DOCTYPE válido (que incluya la url al dtd correspondiente).
Si uso un doctype como éste, ie6 me toma el modelo estándar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Si uso un doctype como éste, ie6 me toma el modelo borde a borde:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
En cambio las versiones 5 y 5.5 (win 2000) siempre me toma el modelo borde a borde, incluso trabajando con HTML estricto.
A ver si mañana tengo tiempo, voy a hacer una prueba en el sitio www.browsercam.com (puedes obtener un pantallazo de una misma pagina trabajando en distintos browsers bajo distintos SO) para verificar como trabaja en cada uno el modelo de cajas, sin ningun hack.
Ah, y una pequeña aclaración respecto a XHTML: si no lo envias desde el servidor con el mime application/xhtml+xml o application/xml (utilizando por ejemplo las cabeceras HTTP de PHP) el navegador parsea el documento como HTML.
Ah, pero claro!
Sí, pues, si le especificas el DOCTYPE (como corresponde) funciona así. Ahora, si no lo haces, el IE 6 toma por defecto toma el HTML 4.01 Transicional, con modelo borde a borde.
Y buen punto el de la cabecera para parsear XHTML. También se puede hacer eso desde el Apache, por si acaso.
Con lo otro que se podria trabajar es con los comentarios condicionales de IE (que entienden las versiones 5.0, 5.5 y 6.0)
Aqui te dejo un link con una explicacion sobre los comentarios condicionales:
http://www.disenorama.com/tutoriales/css/comentarios_condicionales_pa.htm
Nota: por alguna razón a mi me están fallando jajaja doh!!
Ese me parece un buen método, porque está dentro de las especificaciones del Internet Explorer y debería funcionar. Ahora, si no lo hace, mal habla de Microsoft, no del desarrollador que lo ocupa.
El problema es que "el desarrollador que lo ocupa", es al unico weon "que no le funciona " jajajajajajajaja. Sigo investigando pa ver porqué me falla la tonterita ésta (y averiguar si vale tambien para Mac)
Bueno, sí, es una lata, pero no es tu culpa.
Mhhh.... veamos que pasa. Ahora, desarrollar para IE en Mac es un tanto suicida, no crees? Yo he visto que la mayoría de los nuevos usuarios ocupa Safari.
En el caso de IE Mac, solo una vez tuve que meterle mano, y era porque me daba problemas con las posiciones absolutas (aunque fue un caso especial ya que era para participar en un proyecto experimental, por lo que el archivo css que me resultó es un desastre jajajajajajja)
http://www.camaleoncss.com (busca el diseño "United Colors")
Sí, me gustan esos proyectos a lo Zen Garden.
Bueno, preguntando por otros lares (es bueno NO depender del mmug jajajjaja), el problema que tenia para que no me funcuionaran los comentarios condicionales era el siguiente. En mi equipo tengo 3 versiones de IE (5.01, 5.5 y 6.0), pero como la version instalada oficialmente es la 6, las otras dos toman esa identificacion, entonces cualquier script identifica las 3 versionas como 6.0 doh!!
Y para seguir complementando el tema, un link hacia microsoft:
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
Ja, el viejo mmug.... deje mi password irreconocible para no volver a entrar. Aparte que prefiero estar acá, en mi 'estudio' virtual.
Y sí, en quirksmode ratifican el hecho de que los comentarios sólo son válidos para la última versión del IE instalado. Y, además, que hay que tener cuidado con el punto decimal en la versión 5.0 del navegador de Redmond.
Por favor me pueden ayudar de como puedo hacer para implemetar CSS para todos los navegadores.
Monte una pagina y en mozilla sale el codigo en vez de la pagina debido a los estilos cascadas.
Tiene alguien alguna recomendacion.
Enviar un comentario nuevo