Firefox, perfeito! Internet Explorer, torto?
Igor Escobar on Fev 15th 2008
Este artigo foi feito especialmente para você, caro designer, programador de respeito que se preocupa como seu site esta sendo exibido em diferentes navegadores.
Se você é realmente essa pessoa, com certeza, já passou por grandes apuros na hora de fazer com que seu site seja renderizado corretamente em todos os navegadores.
De uns tempos para cá tem se visto muito falar nos tais "CSS Resets". Antes de falar o que é o CSS Reset eu vou explicar por quê seu 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 numero de tags e possibilidades vai entender que isso acontece não por que o Internet Explorer seja uma bosta (não que não seja ;P) 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 mais 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 seu site.
Agora você ficou interessado né? (hehe)
No endereço abaixo você encontra um exemplo do CSS Reset em ação:
http://www.monc.se/tripoli/sample.html
Agora pegue o andereço que eu passei anteriormente e abra em qualquer navegador (IE, FF, OP, NS etc) que você tiver. Se você observar, logo notará 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 chama-los no meu cabeçalho?
Exemplo
Espero que tenha contribuído!
[]'s
Pronto!
Agora você só precisa criar o css do seu site e começar a definir as regras do seu layout.
Webtutoriais:B92473D6
Filed in CSS, Otimização, Utilidades | 6 responses so far
Sapuk Fev 17th 2008 at 09:16 pm 1
Muito bom!!!
será de grande utilidade…
parabéns
Igor Escobar Fev 18th 2008 at 03:48 am 2
Fico feliz que tenha gostado,
Assine os feeds do blog e não perca os próximos posts
TL Fev 21st 2008 at 08:18 pm 3
O link do print.css ta com o msmo do reset.css
Ta certo isso?
É o msmo?
Vlwz
Igor Escobar Fev 21st 2008 at 08:49 pm 4
Opa Desculpa Thales.
Já corrigi!
Abraços.
Gustavo Diassantos Fev 26th 2008 at 12:53 pm 5
Salve Igor,
O Reset não funcionou na minha aplicação.
No FireFox tudo ocorre perfeitamente, mas no IE7 os DIV´s que possuem rolagem, não apresentam rolagem, isso porque o cliente quer no CSS a classe
body{overflow:hidden;}, só que ela tira todas as rolagens da página (essa é a ideia) e mata a rolagem das DIV´s…
Help-me (rs)
Abraços.
Igor Escobar Fev 28th 2008 at 12:33 am 6
Isso acontece por que o seu código CSS esta errado.
No seu código CSS você não pode generalizar uma caracteristica da forma que você esta fazendo ou sem o uso de hacks.
Se você precisa de rolagem na div independente do navegador use o CSS corretamente.
#div1,#div2 {overflow:hidden}
ou
div {overflow:hidden}
o CSS reset RESETA as caracteristicas se você programar o seu CSS de maneira errada não há o que o CSS Reset possa fazer.
Abraços.