DailyCosas 2.0

Ahora que hemos iniciado una pequeña (mu pequeñita) remodelación de DailyCosas, me ha tocado pelearme un poquito con el CSS (el WordPress es una gozada para editar plantillas e instalar plugins) y me he encontrado de frente con los problemas que tiene IExplorer para dibujar lo que dice el CSS.

Y mira que no me gusta tirar de los llamados “ie hacks”, cosas raras que hay que escribir en medio del CSS para que el Internet Explorer haga lo que debería hacer si hubiesen interpretado la especificación como es debido. Pero bueno, si alguien quiere hacer su web con CSS (que es lo que debe: dejar la presentación aislada del contenido), se tiene que acomodar a que mas del 80% del mercado usa eso que llaman navegador, aunque a mi me parece una barca sin remos que va a la deriva.

Box Model

Lo primero que hay que tener en cuenta cuando nos enfrentamos en diseñar para IExplorer (sin dejar de diseñar para todos), es que tiene un problema de implementación del modelo de caja. Todo bloque de información se supone que tiene: un margen, un borde y un padding. Bueno, pues mientras los buenos navegadores marcan el ancho de la caja como la distancia entre los bordes sin contarlos, el IExplorer cuenta la distancia entre los finales de padding, así que luego llega el padding y el borde. Lo suyo sería intentar evitar controlar el ancho y el padding/borde sobre un elemento, ya que el desenlace puede no ser el esperado.
Si no me he explicado bien mejor echadle un ojo a esta explicación gráfica del Box Model Hack (aunque su solución no me gusta).

Si quieres hacer un diseño bastante ajustado a tamaños (este ha sido mi caso), tocará trucar el CSS:

#sidebar {
font: 0.8em 'Lucida Grande', Verdana, Arial, Sans-Serif;
padding: 20px 0 10px 0;
margin-left: 540px;
width: 220px;
}

* html #sidebar {
width: 220px;
wid\th: 217px;
}

Resulta que necesitaba marcar la columna de la derecha de 220px, para que cupiera en página (que si no se me caía para abajo). Pues como está todo metido en una caja con un borde de dos píxeles, pues para IE tengo 758 píxeles por dentro….
Así que primero decimos un tamaño, el bueno bueno, y luego le decimos sólo a IExplorer que el tamaño es 217px (IExplorer se piensa que existe algún elemento por encima del elemento html).

Max-width

El problema con min-width y max-witdh es que no son interpretados por IExplorer, ¿para qué?. A mi esto me gusta usarlo para empequeñecer imágenes a un tamaño apropiado, pero solo si son mas grandes, que si no se pixelan. Y para esto max-width es fantástico.

.post div.img img {
max-width: 100%;
/* redoing max-width WITH IE hack :S */
width: expression(this.width>430?430:true);
}

Esta solución es un poco mas burra, ya que no puedo usar unidades relativas… pero bueno, como los posts siempre tienen un ancho de 430, pues tiro por ahí, usando una cosa rara (un javascript insertado en mitad del CSS) que solo tiene el IExplorer.

Conclusión

Así que ya sabeis, si no hay mas narices, meted de alguna manera algo que solo conozca el IExplorer para decir como debe portarse… Todo el código mostrado aqui pertenece al actual CSS de esta página.. así que también es contenido CC.

Y hoy de regalo: 10 trucos mas en CSS y una lista muy interesante de puntos a comprobar para hacer un buen CSS