Firefox, perfeito! Internet Explorer, torto?

Se você é realmente essa pessoa, com certeza, já passou por grandes apuros na hora de fazer com que um site seja renderizado corretamente em todos os navegadores.

De uns tempos para cá tem se falando muito nos tais “CSS Resets”. Antes de falar o que é o CSS Reset, eu vou explicar por quê o site aparece de um jeito no Firefox e no Internet Explorer de outro (ou vice-versa).

Este problema acontece por que os valores PADRÃO de um navegador para o outro variam. Por exemplo, a margem padrão do body pode ser 10px no Internet Explorer e 8px no Firefox. Se você aumentar o número de tags e possibilidades, vai entender que isso acontece não por que o Internet Explorer seja ruim, mas sim por que os navegadores dão valores dafaults diferentes para cada tag. Devido a esta falta de padronização de um navegador para o outro, causa a diferença na hora da renderização.

Claro que não são todos. Os navegadores tentam se aproximar um do outro, mas sempre passa despercebido uma tag ou outra.

O CSS Reset veio para tentar minimizar estes problemas. O objetivo dele é resetar todas as propriedades das tags htmls de marcação para que assim não importe de onde você acessa. A margem, a largura, etc… sempre vão ser iguais independente do browser que estiver renderizando o site.

Agora você ficou interessado, não é?

No endereço abaixo você encontra um exemplo do CSS Reset em ação:

http://www.monc.se/tripoli/sample.html

Agora pegue o endereço que eu passei anteriormente e abra em qualquer navegador (IE, FF, OP, NS, etc) que você tiver. Se você observar, logo notará que não vai ocorrer diferença de posicionamento, margem, formatação, largura. Se tiver vai ser insignificante ou seu browser é jurássico.

O Nome deste CSS Reset foi chamado pela MONC de Tripoli

Como posso começar a usar?

Você precisa de 4 arquivos:

* reset.css – reseta todas as propriedades independente do browser

* generic.css – re-constrói e atualiza a forma que o HTML é renderizado pelo navegador

* ie.css – este arquivo contem regras a parte para que o css reset funcione no Internet Explorer.

* print.css – torna o HTML legível quando impresso.

Como devo chamá-los no meu cabeçalho?

Exemplo:

   1. <style type="text/css" media="all">  @import url(css/reset.css);  @import "css/generic.css";  </style> <style type="text/css" media="print"> @import url(css/print.css) print; </style><!--[if IE]>
   2.       
   3. <style type="text/css" media="all"> @import url(css/ie.css); </style> <![endif]-->

Espero que tenha contribuído!

[]’s

Pronto! Agora você só precisa criar o css do site e começar a definir as regras do seu layout.