Pinceladas da Web

Em um mundo perfeito, nossas folhas de estilo funcionariam perfeitamente, mas como vivemos em um outro mundo, essa realidade está longe devido a navegadores inperfeitos, comportamentos desconhecidos e muitas vezes problemas que não acabamos achando a solução. Vou deixar aqui alguns passos para eliminar-mos os erros em nossas folhas de estilo:

Validação

A causa mais óbvia para um erro em nossa página é um erro em nosso código, para verificar-mos erros em nosso código, podere-mos usar o validador do W3C para checar o HTML ou o CSS. Uma outra maneira simples é usando a extensão Web Developer para o Firefox, ou a extensão HTML Validator, que lhe permite validar o código sem estar conectado.

Isole seu problema

Muitas vezes é complicado encontrar qual é o problema quando está se trabalhando com uma página completa e uma folha de estilos longa. Copie e trabalhe encima do HTML e CSS relevante em uma página nova, essa é maneira mais simples de encontrar a solução dos seus problemas.

Examine os elementos

Bordas

Para saber exatamente onde se encontra o problema, é aconselhável colocar bordas de cores diferentes em seus elementos, como isso você consegue ver com facilidade as dimensões, margens. Para isso é recomendável usar um bookmarklet CSS Debug Toggle, que lhe permite rapidamente mostrar e ocultar as bordas e nomes dos elementos em sua página. Como sempre, isso não funciona no IE.

Estilos

Para verificar quais regras estão sendo aplicadas a tais elementos, utilize o DOM Inspector do Mozilla/Firefox. Outra função interessante é o Mouseover DOM Inspector da Suite Favelet de Slayeroffice, que pode lhe dar informações muito úteis sobre os elementos que está examinando.

Browsers

Teste sua página em todos os browsers possíveis, e identifique em qual deles é que está ocorrendo o problema.

Bugs

Se não puder identificar qual é o problema, busque na internet para ver se seu problema é comum. Por exemplo, o site Position is everything tem uma lista sobre os bugs mais conhecidos no IE, Mozilla e Opera.

Se mesmo assim você não encontrar a solução para o seu problema, dê uma procurada no Google, lá você pode encontrar várias listas de discussão sobre o assunto.

Referências

• CSS Problem-Solving: Dicas para solucionar problemas em CSS.
• Why we won’t help you: Por que você deve sempre validar antes de pedir ajuda.