Logo Blog Pixwell

Web Design e outras coisas interessantes

Dica Tableless: Como fazer meu layout CSS carregar igual em navegadores diferentes?

Porque em um navegador meu site carrega certo e em outro não?

Essa é a pergunta de todo Web designer iniciante.

Para os que não sabem, os navegadores têm uma folha de estilo interna, onde são definidas todos os estilos iniciais de um site, é nela que está definido o tamanho inicial dos cabeçalhos (H1 … H6), que o texto sem formatação é preto e em Times New Roman e por aí vai …

Por isso há a possibilidade do seu site ser carregado de forma diferente em cada navegador, chegando em alguns casos, a ficar todo “quebrado”.

Então como resolver isso?

Antes de iniciar qualquer codificação CSS é necessário fazer o “Reset Global” de todos os estilos, resetar toda a estilização padrão dos navegadores.

Existem várias técnicas de Reset Global:

– Rude Works: http://rudeworks.com/blog/css-inicial-2/

– Eric Meyer: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

– Entre outros …

Mas eu filtrei o que mais uso e vou postar abaixo:


/* ############ RESET GLOBAL ################ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, hr, input{
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 vertical-align: baseline;
 background: transparent;
 list-style: none;
 border-collapse: collapse;
 border-spacing: 0;
 text-decoration: none;
}

img a, a img{border: none;}
blockquote, q {quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {
content: ""; content: none;
}

html{font-size: 16px;}

body {
 font: 83% Verdana, Geneva, sans-serif;
 line-height: 150%;
 color: #666;
}

/* ############ LINKS ################ */
a {color: #000;}
a:hover {color: #666;}
a:visited {color: #999;}

/* ############ CABEÇALHOS ############ */
h1, h2, h3, h4, h5, h6{
padding: 5px 0 10px 0;
font-family: Arial, Helvetica, sans-serif;
}

h1 {font-size: 180%;}
h2 {font-size: 160%;}
h3 {font-size: 140%;}
h4 {font-size: 130%;}
h5 {font-size: 120%;}
h6 {font-size: 120%;}

p {padding: 5px 0 10px 0;}

/* ############ CLASSES COMUNS ############ */
.clear{clear: both;}

.imgLeft{
 float: left;
 padding: 0 6px 3px 0;
}
.imgRight{
 float: right;
 padding: 0 0 3px 6px;
}

Resumindo: Inicie sua folha de estilo com o Reset acima, isso fará que todos os padrões iniciais sejam zerados, e somente depois inicie sua estilização.

Veja Também:   Desenhando Olhos realistas

Qualquer dúvida sobre o Reset Global, postem nos comentários.

Espero ter ajudado.