octubre 17, 2005

DIV's CSS y desarrollo cruzado entre navegadores

Como siempre, es un placer escribir páginas para varios navegadores (lease FireFox e Internet Explorer), ahí van un par de truquitos que he descubierto recientemente, no sin un gran esfuerzo.
Todo mi "Amor" para los que siguen los estandards :p

1. Evitar usar tablas y mantener una estructura de columnas:

CSS Layout Techniques: Static Width and Centered

No olvidar poner al final un buen:

<br clear="all" style="margin:0; padding:0;" />

Que va a ser quien se encargue de que podamos seguir escribiendo debajo de nuestras columnas como si hubieramos cerrado la tabla imaginaria.

2. Conseguir un borde cuadrado para las columnas anteriores:
Tiramos de javascript:

function fixheight() {
var maxH = 0;
var ids = ["col1","col2","col3"];
for (var i=0;i<ids.length;i++) {
var d = document.getElementById(ids[i]);
d.style.height = "";
if (d.offsetHeight > maxH) maxH = d.offsetHeight;
}
for (var i=0;i<ids.length;i++) {
var d=document.getElementById(ids[i]);
d.style.height = maxH+"px";
}
}
Tenemos que cambiar el array ids por los ids de nuestas columnas.

Más info en: div 100% height problem

3. Me cago en explorer, por que razón si digo que el div tiene 1px, me pone lo que le da la gana...
<div style="height: 1px;"><div></div></div>
Y listo.

comentarios: