Existem algumas ferramentas na Internet que permitem identificar os erros de HTML e CSS, nomeadamente:

• W3C HTML Validation Service: http://validator.w3.org/
• The W3C CSS Validation Service: http://jigsaw.w3.org/css-validator/

Além destas ferramentas, existem igualmente alguns serviços de validação do nível de acessibilidade dos sites como, por exemplo, o ATRC Web Accessibility Checker Version (http://checker.atrc.utoronto.ca/index.html ) da Universidade de Toronto.

Estas ferramentas ajudam a identificar as partes do código que não seguem as normas do consórcio W3C relativas à programação Web. No entanto, a definição da linguagem HTML é permissiva em alguns aspectos relacionados com a apresentação do HTML (rendering) que leva, em algumas situações, a resultados visuais diferentes em browsers diferentes mesmo com código HTML e CSS correcto.

Uma das principais causas para as diferenças de posicionamento dos layouts nos diferentes browsers é a existência de diferenças na stylesheet por omissão que cada browser aplica aos elementos das páginas. Normalmente, isto leva à definição de margens e paddings por omissão de certos elementos.

Uma das opções é colocar explicitamente as margens e paddings nas stylesheets. Como não sabemos exactamente os valores por omissão de cada elemento, é necessário definir novas margens e paddings para cada elemento que iremos utilizar (não será necessário fazer para os elementos inline como o em, strong, a, etc. aos quais normalmente não se aplica margem).

Por exemplo, poderá utilizar a seguinte stylesheet:

html,body{margin:0;padding:0}
p {margin:0 0 1em 0;padding:0}
h1{margin:0 0 .7em 0;padding:0}
form {margin:0;padding:0}

É frequente utilizar-se a técnica do seleccionador universal (*) para configurar todas as margens e paddings a zero.

Por exemplo:

* {margin:0;padding:0}

O seleccionador universal (o asterisco *) representa todos os elementos.

As listas precisam de cuidado especial pois, com este método, deixa de haver o espaçamento habitual.

Deverá, por exemplo, ser criado o seguinte código CSS:

ul {padding:1em}

Existem alguns inconvenientes relacionados com este método. Alguns elementos são afectados e deixam de ser apresentados da forma a que estamos habituados. Por exemplo, o botão de input do Mozilla irá perder o seu efeito "depressed when clicked effect".

O método mais seguro para ultrapassar o problema das margens e paddings é simplesmente definí-las à medida que vai sendo necessário pois evita duplicações e resolve os problemas do reset geral.