Cómo solucionar problemas en CSS

En un mundo perfecto, podríamos escribir CSS y automaticamente funcionarían perfecto. Pero nunca faltan errores de dedo, navegadores caprichosos y comportamientos desconocidos que nos dejan confundidos, y muchas veces sin saber cómo empezar a solucionar los problemas. Aquí hay algunos pasos que puedes seguir para eliminar los bugs en tus hojas de estilo.

1. Valida

La causa más obvia para un error en nuestra página es un error en el código. Para verificar nuestro código, podemos utilizar el validador del W3C para checar tanto nuestro html como nuestras CSS. Una manera sencilla de hacerlo es a través de la extensión Web Developer para Mozilla/Firefox, o con la extensión de validación, que te permite validar sin necesidad de estar conectado.

2. Aisla tu problema

Muchas veces es difícil encontrar cual es el problema cuando está sumergido en una página compleja con una hoja de estilos larga. Copia y pega solo el html y css relevante a tu problema en una página nueva, y te simplificará encontrar y solucionar los problemas.

3. Examina tus elementos

Bordes

Para saber exactamente donde está el problema, es muy util el poner bordes de colores a tus elementos, lo cual te facilitará ver dimensiones, márgenes y bordes. Para esto, es recomendable utilizar el bookmarklet CSS Debug Toggle, que te permite rápidamente mostrar y ocultar los bordes y nombres de los elementos de tu página. Desafortunadamente no funciona en Internet Explorer. Pero si de verdad quieres usar IE, puedes utilizar los favelets de accessify .

Estilos

Para checar qué reglas se están aplicando a tu elemento, el inspector DOM de Mozilla /Firefox te puede ser muy util. También la funcion Mouseover DOM inspector de la Favelet Suite de Slayeroffice te puede dar información útil sobre los elementos que estás examinando.

Navegadores

Prueba en todos los navegadores posibles e identifica en cuáles (y qué versiones) se presenta el problema.

4. Comprueba los bugs conocidos

Si ya pudiste identificar exactamente cual es el problema (Por ejemplo: el div#contenido se mueve 3 pixeles a la derecha en IE 5.5 ), busca en la red para ver si es un problema común. Position is everything, por ejemplo, tiene una lista muy completa de bugs en IE, Opera, y Mozilla.

Si no lo encuentras ahí, intenta buscar en google o en los archivos de alguna de las muchas listas de discusión de CSS.

5. Experimenta

Es muy fácil hacer cambios con la función EditCSS de la extención Web Developer para Mozilla, que te permite ver tus cambios inmediatamente.

6. Pide ayuda

Siempre hay gente dispuesta a ayudar en foros de discusión, tales como Domestika, nuestro propio foro o Isopixel, o en listas de correo como Ovillo. Recuerda siempre explicar tu caso claramente, y poner un enlace a tu página con el problema aislado. Entre más información des, más probable es que alguien pueda (y quiera) ayudarte.

Usuarios que han visto este tema también han visto...

- Menú rollover en CSS
- Colores en CSS
- Celdas con puntas redondeadas utilizando CSS
- Hacks en CSS útiles para Internet Explorer
- Botones con CSS

- Versión imprimible de este documento
- Enviar por e-mail este documento