Errores de diseño que trae Firefox 3x

Mucho se habla de las nuevas versiones de Firefox arreglando fallos de seguridad o de renderización pero lo cierto es que se les olvida los errores de diseño, es decir, que las reglas CSS funcionen como se han establecido, por esa razón les voy a mostrar 5 propiedades CSS que no son soportadas correctamente por Firefox y que ocasiona que los diseños se distorsionen de forma muy minúscula pero visualmente se vean mal.

#1 El error de perfilado desbordado

En Firefox 3 en adelante cuando un elemento desborda el borde de un elemento familiar y que tiene la propiedad “outline” lo que hace es que no deja pasar el elemento primero fuera del familiar como se muestra en la imagen.

La correcta implementación de dicha propiedad con los elementos debería dejar que el desbordamiento siguiera sin interferir en el contenedor primario

Referencia: SitePoint CSS Reference: outline Property

#2 Tablas con bordes colapsados

Con la propiedad “collapse” en CSS se hace que una tabla parezca que dos tablas están unidas ya que los márgenes superiores y de la izquierda se reduce a 1 px, lo que hace es que al usar los elementos en bloque lo que sucede es que los bordes se sobrepasan de forma que uno pasa otro, haciendo que la propiedad “border: collapse” no sirva con un elemento bloque

En Chrome por ejemplo no sucede eso, el colapso hace que el elemento de bloque se sobreponga al elemento con la propiedad

Referencia: SitePoint CSS Reference: border-collapse Property

#3 Celdas vacías en las tablas

Cuando una celda de una tabla no tiene contenido y se tiene la propiedad “empty-cells” puesto en “hide” lo que se supondría es que ese espacio no se viera en la tabla, sin embargo este error es más extendido de Firefox ya que casi ningún navegador logra el efecto adecuadamente, puesto que los bordes siguen apareciendo

Referencia: SitePoint CSS Reference: empty-cells Property

#4 Espacio de palabras en línea

En Firefox cuando usas un valor negativo a la propiedad “word-spacing” se entenderá como un cero adyacente a los elementos en línea. En un principio la propiedad con valor negativo tendría que superponer las palabras al principio pues no hay espacio en blanco, sin embargo Firefox lo que hace es que sólo se eliminan los espacio entre palabras y llega a sobreponer algunas

Reference: SitePoint CSS Reference: word-spacing Property

#5 Decoración de texto en elementos descendentes

Si se pone una propiedad “text-decoration” el valor no debería pasarse a un elemento flotante descendente pero en Firefox 3.x los objetos flotantes obtienen el mismo valor de la propiedad aún cuando no se les asignó a ellos. Pongámoslo así: tengo un elemento <span> flotante encima de un elemento <a> que tiene la propiedad “underline”. Sin embargo la propiedad se pasa al objeto flotante aún cuando con la propiedad de flotante no debería suceder así.