Si eres diseñador web o más concretamente maquetador web habrás tenido que lidiar con un buen montón de errores (o bugs) de CSS que te habrán costado un buen rato solucionarlos. A veces (muchas) es por nuestra culpa, normalmente por un error tonto, otras por que lo que queremos hacer se ha de enfocar de otra manera y algunas veces pero las más frustrantes por un bug de un navegador (normalmente IE).

Estas son algunas pautas que uso para poder solucionar más rápidamente estas cosas:

• Maquetar primero con un navegador con buen soporte de estándares, por ejemplo Firefox
• Usar Firebug. Firebug te permite saber la posición que ocupa un elemento, su tamaño, margen, padding, etc y te dice exactamente las propiedades de css que tiene. Además puedes variarlas o desactivarlas directamente sin tener que actualizar. Otro buen plugin es el webdeveloper pero Firebug es mucho más potente. Para IE existe un addon que puede ayudar un poco pero no es para nada similar. También puedes usar Firebug en otros navegadores insertándolo cómo un fichero javascript.
• Asegúrate de que estás modificando atributos de la etiqueta que quieres: Es algo muy obvio pero a veces no funciona lo que estamos buscando simplemente por que no se lo estamos poniendo al sitio adecuado. Además de mirarlo con firebug (y mirar si ese elemento tiene las propiedades adecuadas) también puedes hacer algo muy fácil: añadir una propiedad fácil de ver como un font-size: 3em o un background red. Si hacemos eso y no vemos ningún cambio es que no estamos aplicando las propiedades sobre el elemento deseado. Tal vez esté mal escrito o sea una clase en lugar de un id (o viceversa). Si todo está bien podría ser que la propiedad esté perdiendo frente a otra (siguiente punto)
• CSS wars: Hay definiciones de propiedades que tienen preferencia a otras. Por ejemplo, si defines una propiedad y luego la vuelves a definir tiene preferencia la última. Si le añades !important al final a la primera tendrá preferencia esta. Puedes ver un bonito y divertido PDF sobre esto.
• Cache: Comprueba que el css que está usando tu navegador es el último que has subido, podrías estar mirando la cache. Para que no use la cache y recargue el último css en Firefox has de utilizar shift+F5 y en IE control+F5. Para asegurarte con Firebug puedes ver el css que se está usando, comprueba que los últimos cambios estén ahí.
• El dominio correcto: Tenemos que comprobar que realmente estemos en la web correcta. A veces tenemos la web en local, la web de desarrollo en el servidor y la web final. Es obvio pero a veces me ha pasado tener en el navegador un dominio diferente a la que estoy realmente modificando.
• Comentarios condicionales IE: Usa comentarios condicionales para IE en los que sólo has de poner las correcciones para IE, no todo el css completo. Eso hace que sea más fácil de mantener. Y hazlo al final, una vez ya esté todo hecho para los otros navegadores. Una vez hayas llegado a este paso verás algunos bugs de IE muy divertidos.
• Bugs de IE (o de otros navegadores): IE tiene un montón de bugs aunque no es sólo de IE, los otros navegadores también tienen bugs pero IE gana por goleada.
• Busca en los buscadores: Mira lo que te pasa, intenta describirlo (mejor en inglés) y ves a tu buscador preferido y por "lo que me pasa" IE bug. Normalmente lo mismo que te pasa le habrá pasado antes a otras personas y cómo suelen ser otros desarrolladores lo habrán publicado en internet. Aunque a veces es complicado describir el error igual que el que publicó.
• Divide y vencerás (divide and conquer): El bug suele tener un trigger (un disparador) que hace que ocurra pero no sabemos que es. Para poder encontrarlo si no tenemos la más remota idea un buen método es seleccionar la mitad del css, borrarlo y subirlo. Si el bug todavía está allí es que el trigger está en la parte que no hemos borrado, si desaparece está en la parte borrada. Luego volvemos a hacer lo mismo en la parte que sabemos que está el trigger y seguimos así hasta llegar al trigger en sí. Una vez descubierto podemos intentarlo hacer de otra manera o podemos volver a buscar en google teniendo más datos.
• Ovillo: Por último si ya lo has mirado solicita ayuda en alguna lista de correo o foro de CSS. La lista de correo Ovillo es la mejor para esto en castellano.

¿Vosotros que trucos usáis?

Actualización

En Ovillo Kemie de diseñorama me comenta que ella hizo un post parecido y al leerle me he dado cuenta que me he dejado una de las pautas más importantes: Validar el HTML y el CSS!

Actualización 2

También me olvidé de una pauta bastante útil: una vez que ya estés atascado suele ir muy bien pedir ayuda a otra persona sobretodo por que para que te ayude le tendrás que explicar paso a paso y de forma muy clara cual es el problema. Muchas veces con tan sólo plantear el problema he podido dar con la solución yo mismo con lo que la persona a la que le he pedido ayuda sólo ha tenido que decir "de nada".

Es mucho más habitual de lo normal encontrarse con páginas con fondo negro (o por lo menos muy oscuro) junto con texto claro. No sé si seré una excepción, aunque creo que no, pero al dejar de leer una página de estas características y ponerme a leer una normal con fondo claro veo las estrellas durante un ratito.

Para que no me pase esto uso la extensión para firefox webdeveloper para desactivar los estilos (Control + Mayus + S) y así poderla ver en los colores predefinidos por el navegador, en el mio fondo blanco y texto negro.

¿A alguien más le pasa lo mismo?

Dries está estudiando la empresa que hará el rediseño de Drupal.org de entre todas las que se presentaron para realizar el trabajo ya que la Asociación de Drupal la escogerá en breve (si no lo ha hecho ya). El rediseño era una de las mejoras que la gente había pedido en la última encuesta.

Además Dries también comenta que el proceso de migrar drupal.org a Drupal 6 está en marcha y por buen camino y que fue un error publicar Drupal 6 sin haber migrado antes Drupal.org.

Son dos buenas noticias ya que desde hace tiempo que drupal.org necesita un rediseño y un nuevo enfoque (por ejemplo tener subdominios por temáticas: downloads.drupal.org. developers.drupal.org.. y que la portada sea menos técnica y explique de manera fácil que es Drupal para usuarios inexpertos)