Você pode tentar dar um CSS Global Reset, todo browser tem prioridades para definir o CSS de uma página.
A ordem é:
CSS inline
Através do uso do atributo style
cujo mesmo não recomendo:
<div style=”float:left”>
CSS na página
Outra coisa que não recomendo, e não vejo necessidade. É quando coloca a TAG style
dentro da TAG head
:
<style>
.publicidade {
width: 200px;
}
</style>
CSS externo
Esse é o CSS normal, quando invocamos dentro do head
:
<link href=”home.css” type=”text/css” rel=”stylesheet”/>
CSS definido pelo browser
Sim, isso existe e é isso que nos causa problemas.
Quando nenhum CSS é encontrado para um elemento (div
, p
, h1
, img
, etc..), o navegador coloca por sua conta, qual vai ser o tamanho dos títulos, dos parágrafos, a margin
entre elementos, a fonte padrão, o padding
da página, bordas dos elementos, etc…
É aí que entra o CSS Global Reset, que são uma série de propriedades CSS atribuídas a todos os elementos HTML, justamente para retirar o CSS definido pelo browser, deixando as propriedades de todos os elementos iguais. Assim reduz drasticamente a diferença entre Firefox, Safari, Internet Explorer, Opera, etc.
Existem diversos CSS Global Reset (normalmente as pessoas colocam alguma coisa a mais para facilitar no seu projeto), mas todos eles variam pouco.
Eu uso esse aqui:
{outline-color:invert;outline-style:none;outline-width:medium;}
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,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: inherit;
font-size: inherit;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; font-size:100.01%;}
ol, ul { list-style: none;}
table { border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after { content: "";}
blockquote, q { quotes: "" "";}
strong{ font-weight: bold; }
body,input,select,textarea { font-size: inherit; }