¿Márgen negativo = position: absolute?
El primer error que voy a mencionar es el que existe en el blog de Sausage Roll. El error en sí es simple: si la barra de contenido es menos alta que la sidebar, el footer se encima a la sidebar:
Y como para entender el problema hay que entender cómo funciona en primer lugar, aquí una explicación muy breve, Basicamente, son tres cajas las que tengo: content, sidebar y footer. content y sidebar están flotadas a la izquierda para que estén una al lado de la otra. footer, por su parte, tiene un clear: both; para posicionarlo debajo de las dos antes mencionadas.
Hasta aquí todo iría bien, pero hay un pequeño detalle: el div content es del MISMO ancho que el footer. Esto significa que el div sidebar no tiene espacio para estar al lado de content con simples floats; para posicionarlo donde está, el div content tiene un padding derecho de 290px, y el div sidebar un ancho de 260px y un margen izquierdo negativo de 260px. Aquí una imagen para mostrar más o menos la idea:
El div rojo es el contenedor, el verde el sidebar, el negro el footer y el espacio blanco que hay a la izquierda del verde es el resto del padding del contenedor (para simular un espacio entre el contenido y la sidebar). La razón de por qué hacer esto no es importante ahorita, lo importante es el error que sucede en IE8. Como se aprecia en la figura, el sidebar está COMPLETAMENTE dentro del div rojo, esto es: sus 260px están adentro del div rojo; y es aquí donde el error aparece. Por alguna extraña razón, el que el sidebar tenga un márgen negativo de su mismo tamaño o mayor aparentemente lo saca del flujo normal de la página; como si estuviera posicionado absolutamente. Por tanto, el clear: both del footer no se aplica al sidebar, sólo al content, y si el content es más corto que el sidebar, pasa el error:
Lo curioso ha sido cuando arreglé el error. Quitando un pixel del margen negativo del div sidebar (y haciendo los necesarios ajustes al div contenido de ancho y padding), el error se solucionó solito... casi casi como si le hubiera quitado el position: absolute al sidebar:
Como pueden ver en la imagen, el div sidebar (verde) ahora está 1px afuera (2px en la imagen, pero es para que se notara) del div contenedor (rojo), que ahora es 1px más corto. Con esto, el footer aplica el clear al sidebar sin problemas. ¿La razón? No tengo idea.
Gracias por la info, me interesa el primer error, muy buena explicacion del por que del error, pero... lo de 'display: block;'? wtf!, es algo que uso siempre, pero que bueno que tengas la solucion.
Y bueno creo que voy a tener que descargar a ie8 ;(
saludos
Holas, muy wena la info, casualmente io ando viendo tu pagina con firefox 3.0bpre5, un nightly build, y en el ejemplo del div k es un link al pasar el mouse, tampoco me lo reconocio :O tuve k ir al enlace k tiene el fixed...k raro :O
ojala y tambien arreglaran javascript en IE8. Es una pesadilla hacer javascript debugging en el maravilloso mundo de IE.
Mis webos que!
Hola...
Estuve leyendo tus errores y en algunos note que están mal estructurados por eso sucede eso... y como firefox es muy complaciente pues no se nota... por ejemplo en muchos blogs el firefox acopla el tamaño de las imagenes a el div del post y cuando lo ven en otro navegador que como no le espicifaron el tamaño pues lo pone en el tamaño normal y a veces sobrepasa el tamaño por esos e ven mal y luego se quejan...
muy bueno los datos... oye perdona q me salga del tema, pero esq me ha llamado la atencion el theme de tu windows, cual utilizas?? jeje salu2
None...
None...
Estos de Mocosoft son terribles....