Como solucionar Pequenos Bugs em CSS

Artigo muito bom postado pelo Maurivan Luiz Padilha no site MXStudio.

Introdução
Em um mundo perfeito, poderíamos escrever CSS e funcionaria independente dos browsers perfeito. Mas nunca faltaram erros de digitação, navegadores “lindos” e também comportamentos desconhecidos que nos deixam confusos, e muitas vezes sem saber como começar a solucionar os problemas. Irei citar neste artigo alguns passos que podem seguir para eliminar “os bugs” em suas folhas de estilo.

O motivo mais óbvio para ocorrer um erro na página é um erro no código, Para verificar nosso código, podemos utilizar o famoso validador da W3C para checar tanto nosso html como nosso CSS. Uma maneira mais fácil e sensata de fazer é através do plugin Web Developer Tools para Mozilla/Firefox, ou então com a extensão de validação que permite você validar sua página sem a necessidade de estar conectado a rede mundial de computadores (internet)

Muitas vezes é difícil encontrar qual é o problema quando você está visualizando uma página completa, com uma folha de estilos extensa. Aconselho você então a pegar e copiar somente o html e o css que seja referente a seu problema em uma nova página, isto simplificará para você encontrar e solucionar seus problemas.

Pré-Requisitos

Vontade de aprender é considerado fundamental, aprender com os erros é essencial, e um cafézinho expresso para acompanhar 🙂

Objetivo

Aprender pequenos macetes que podem ser úteis em alguns casos, tais quais problemas com altura, largura, margin e padding.

Conteúdo
Examine seus elementos.
Para saber exatamente aonde está o problema, é muito útil inserir bordas de cores em seus elementos, o qual te facilitará perceber dimensões, margens e bordas, e caso seja detectado algum pequeno deslize no tamanho de uma div, pode ser rapidamente resolvido.

Estilos
Para checar que regras você está aplicando a seu elemento, o inspetor DOM do Mozilla Firefox pode ser muito útil.

* Inspetor DOM é uma ferramenta para analisar a estrutura do documento

Cheque para ver se o BUG não é conhecido.

Se já puder identificar exatamente qual é o problema, por exemplo; a div #conteudo se movimenta 3 pixels a esquerda no internet explorer 5.5, enquanto em outros navegadores continua intacta), busque na internet para ver se é um problema comum, no site “Position is everything”, por exemplo, tem uma lista muito completa de bugs que ocorrem no IE, Opera e Mozzila Firefox.

Se por ventura você não encontrar no “Position is everything”, você poderá encontrar em nosso fórum de CSS http://www.mxstudio.com.br/forum/index.php?showforum=7

Experimente!
Tente trocar os valores em sua folha de estilho, zerar, adicionar, para ver como afetam sua página. Pode ser útil colocar as margens e padding zeradas (padding:0; margin:0;).

É muito fácil de realizar alterações com o Notepad++ e com o plugin WebDeveloper Tools, para Mozilla Firefox, que lhe permite visualizar as alterações imediatamente.

Peça Ajuda!
Sempre há gente disposta a lhe ajudar aqui nos fóruns da MXSTUDIO, saiba sempre como explicar seu problema, e colocar um link com a sua página, ou então o codigo de sua página html e sua folha de estilhos para que facilite o trabalho de quem for lhe ajudar. Com certeza irá encontrar alguém disposto!

Agradecimentos
Para este artigo, eu gostaria de agradecer ao imuller que abriu a minha cabeça na introdução.
E também a meu amigo Felipe Nascimento Silva Pena (ecl), que me avisou de um erro ortográfico a ponto de ser corrigido.

Considerações Finais
Neste artigo está explicito alguns macetes para você resolver problemas básicos que podem ocorrer em sua folha de estilo, porém nem todo erro pode ser corrigido apenas com estes macetes!

Para saber mais:

W3C – The World Wide Web Consortium
http://www.w3.org/

Documentos W3C em Português!
http://www.amtechs.com/w3c/

CSS Bug Table
http://www.richinstyle.com/bugs/table.html

CSS contents and browser compatibility
http://www.quirksmode.org/css/contents.html

 

Autor: Maurivan Luiz Padilha – Colunista WEBSTANDARDS do Portal MXSTUDIO

Qualquer dúvida referente à webstandards, pode ser enviado um e-mail para maurivan@mxstudio.com.br ou acesse o nosso fórum!