Como solucionar problemas en CSS

Escrito por Kemie Guaida en 21.03.05

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. Checa 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

Intenta cambiar valores en tu hoja de estilo, quitar, agregar, para ver como afectan tu página. Te puede ser útil poner los márgenes y padding en 0, agregar un alto de linea,

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, Forosdelweb 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.

Links Relacionados:

Buenas Prácticas trabajando con CSS - Evita problemas antes de empezar.
CSS Problem-Solving - Tips para solucionar problemas en CSS
Why we won't help you- Porqué debes de validar siempre antes de pedir ayuda.

Comentarios

22 marzo 2005, 01:03Luis Beltran
Hola Kemie, antes que nada muchas gracias por tus aportes como siempre hechos con claridad y calidad.

También es importante ver que elementos “heredan” propiedades y cuáles no. Eso me ha traído bastantes dolores de cabeza.
22 marzo 2005, 05:22Zeta
Hey que buen tutorial, yo siempre me apego mucho a poner bordes de colores y datos exagerados
26 marzo 2005, 13:56cvander
Muy buenos consejos. Prácticos y útiles. Desconocía un par de extensiones que comentas pero ya se las agregará a Firefox.
14 mayo 2005, 15:12Jaime Olmo
Tremendos consejos! Usar CSS es sencillisimo… saberlo usar cuesta. He aquí la notable diferencia entre un buen diseñador y uno… bueno… quizás no tan bueno. Gracias por tus consejos, nos aplica a todos.
30 mayo 2005, 18:26Matías Bertrán Bertone
Hola y felicitaciones por vuestra web. Es muy bonita y está muy bien hecha.

Lo que necesito, más que nada, es un consejo. Quiero comprarme un manual de CSS. Estoy empezando pero tampoco soy un tonto como para comprar un libro para principiantes. Ya he hecho algunas cosas robando de aquí y de allí pero me gustaría saber hacerlo y no robarlo y modificarlo. Me podeis recomendar alguno que esté bien?

Muchas gracias, saludos,

Matías.
19 agosto 2005, 16:08Pablo Ilescas
Felicidadez, buen sitio y de mucha ayuda, es interesante ver la cantidad de herrores que se cometen al utilizar CSS y podriamos generar una lista tal vez interminable, pero aqui atacas unos de los mas comunes.

Nuevamente Felicidadez….
3 diciembre 2005, 08:12me llamo sara
wenas,me parece mu bien esta pagina,pero ya podriais inventar algo que explicases tu problema y te lo solucionara no?a que esperais?a que lo invente yo?pues vais en buen camino gente..haber cuanso espavilais,pero os felicito por vuestra pagina.bsiks
19 octubre 2006, 19:07inyaka

matias conosco una excelente enciclopedia de css pero no esta a la venta

tambien pasate por aca
http://www.cssplay.co.uk
y por supuesto por este exelente blog
29 octubre 2006, 19:40fearlex

excelente explicacion, sabios consejo que ayudan mucha a la hora del CSS :D
30 noviembre 2006, 02:26Germán Wasem

Kemie ¿no contestas los comments? ¡qué feoo!
27 febrero 2007, 00:09javiera

necesito ayuda ….................
puxa baje este programa para poder abrir mi correo que internet explorer tenia puros problemas y cuando ya lo tengo mozilla no funciona k onda< !!!! estoi desesperada ya van como 3 meses k no puedo ver mi correo ..................
17 octubre 2007, 20:36leonardo

tengo un problema utilizando una hoja de estilos , resulta q no he podido utilizar una imagen como borde pero verticalmente con la propiedad; repeat-y si alguien pudiera ayudarm con esto ya q solo funciona con repeat-x para los bordes redondeados tan famosos
30 diciembre 2007, 06:27Víctor

Geniales recursos los que ofreces, pocos sitios tan buenos sobre estandares en español. Sigue así
3 enero 2008, 23:00Juan

Hola.
Primeramente, excelente website.
En segundo lugar y arriesgándome a que me digan que este no es el lugar para hacer esta pregunta…
... lanzo pregunta:
¿Se puede hacer que un div posicionado en absoluto llegue hasta el final de tu página?
Mi problema basicamente es que necesito colocar dos divs absolutos que solo contendrán unas sombras de los laterales de mi hoja principal en la web.
Sin embargo y aun indicandole heigth:100%; mi bonita sombra se queda a mitad de camino, es decir, cuando supuestamente ese div cree que ya no hay mas página. sin embargo si que la hay porque tengo más contenido y aunque la el navegador me deja hacer scroll el div del primer cuadro de navegador no pasa…
si me pudieran ayudar… agradecido eternamente estaría… (by Maestro Yoda) :P
Gracias de antemano…
Juan
17 marzo 2008, 02:15Zafanor

Existe alguna guía sobre corregir los colores entre IE y Firefox. El problema que tengo es que en Firefox el naranja se ve naranja pero en IE7 el naranja se ve gris.
17 marzo 2008, 02:25Kemie

Zafanor, no debe de suceder eso. checa que tu hoja de estilos sea válida.
18 marzo 2008, 03:00Zafanor

Kemie… estuve validando y me da OK, pero sigue igual.
Aca te paso el código.
hr.linea1 {
clear : both;
float : none;
width : 100%;
height : 2px;
background-color : #f93;
border : none;
padding-top : 1px;
}