Teste-seu-conhecimento-02
Publicado em: 2006-11-14 — 14.372 visualizacoes
Você sabe como resolver este ‘bug’?
Se você já construiu um layout baseado em CSS é muito provável que tenha se deparado com esta situação.
Você zerou as margens e paddings superior e inferior para o elemento body e ao visualizar seu layout ocorre o seguinte:
No Internet Explorer está tudo certinho e de acordo com suas previsões, ou seja, a sua página está ‘coladinha’ nos limites superior e inferior da janela do navegador. Mas, no Firefox a página encontra-se ‘descolada’ daqueles limites, mostrando um espaçamento como se fosse uma margem entre os limites da página e da janela do navegador.
Neste link, construi uma página (na verdade, uma simulação simples, constando apenas de alguns parágrafos dentro de uma DIV) mostrando esta inconsistência de renderização. Abra a página no Internet Explorer e no FireFox e compare. Observe que no Internet Explorer não existe um espaço extra acima e abaixo da página.
Perguntas:
- Qual navegador apresenta o comportamento correto
O Internet Explorer que honra as declarações de margens e paddings zerados ou o FireFox que acresenta uma margem? - Você sabe explicar porque isto acontece?
- Que declarações CSS devo usar para fazer o FireFox renderizar igual ao Internet Explorer?
- Que declarações CSS devo usar para fazer o Internet Explorer renderizar igual ao FireFox?
Nota: ‘Hacks’ não devem ser colocados no (X)HTML, assim resolva o problema sem acrescentar ID’s, classes ou introduzir qualquer alteração na marcação da página. Use somente regras CSS.
----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------
Livros do Maujor
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique o livro para detalhes.
Esta matéria foi publicada em: 2006-11-14 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/11/14/teste-seu-conhecimento-02/trackback no seu site.
ante da declaracao body {}
Coloquei * { padding:0; margin:0;} e funcionou!
Abraços
coloquei apenas
p{
margin:0;
padding:5px;
}
e funcionou, não sei se esta correto
Como o amigo respondeu consegui resolver com
* {
padding:0; margin:0;
}
Simples,
Só usar o seletor universal igual ao Lucas fez!!!
1) Qual apresenta o comportamento correto?
Eu acredito que seja o IE que não extende a margem do p além dos limites do seu pai.
2) Por que acontece?
Pelos meus testes, aquilo é o margin top do primeiro elemento P que está dentro do #container.
O Firefox extendeu a margem dos elementos p que estão dentro dele para fora dos limites do seu pai.
Engraçado é que se eu setar o overflow pra hidden ou scroll, ele renderiza como o IE, colocando a margem do ‘p’ DENTRO do #container.
3) Declarações pro FF renderizar igual ao IE:
acrescentar #container p { margin-top: 0px; }
OU
colocar um overflow: hidden; dentro no #container (muito estranho)
4) Não consegui outra forma a não ser setando a margem externa superior do container na mão.
3 ) Três soluções com resultados diferentes. Penso que a mais correta seja zerar a margem superior do parágrafo.
* { margin: 0px; padding: 0px; }
#container { overflow: hidden; }
#container p{ margin-top: 0px; }
4) No IE 7 a renderização é igual ao Firefox. Não testei com a versão 6.
A extensão CSSViewer do Firefox indica que a margem está sendo aplicada ao body (ela mostra uma linha pontilhada vermelha mostrando onde o body começa). Se for isso mesmo, parece que quando margens adjacentes se fundem, a margem resultante é aplicada ao primeiro elemento envolvido (neste caso, o body). Nessa parte da especificação, não encontrei nada que diga quem deve ser o “dono” da margem resultante de uma fusão…
1 e 2:
Apenas minha opinião, mas acho que nenhum dos dois.
O ie zerou a margem do topo do paragrafo, naum colocando em relação a div.
O firefox colocou, mas colocou do seu pai em relação ao body. Na minha opinião naum eh correto, pois como eh margem do paragrafo e seu pai eh a div, seria como utilizar um padding dentro da div.
3:
p {margin-top: 0; }
Usando essa declaração no css, renderiza igual, pois se colocar pra geral o padding e margin, os paragrafos ficariam colados.
4:
body {
font:12px/1.5 Verdana, sans-serif;
padding:0;
margin:12px 0 0 0;
background:#ff6;
}
Modificando a linha do margin, colocando 12px no margin-top do body.
Bom, essas foram as soluções que achei… Agora o motivo, pode ser que seja outro, etc…
div#container p:first-child {
margin-top: 0px;
}
Dei uma pesquisada e achei as seguintes referências: http://www.complexspiral.com/publications/uncollapsing-margins/
http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins
Pelo que entendi quem renderiza errado é o IE 6 e não o Firefox. Para fazer com que isto fique como o esperado basta colocar algum padding horizontal em #container
#container {
width:400px;
margin:0 auto;
padding:1px;
background:#ccc;
}
Ou algum border, também em #container
#container {
width:400px;
margin:0 auto;
border: 1px solid #ccc;
background:#ccc;
}
Correto? Abraço
Uma vez eu passei por esse problema, e resolvi da seguinte forma:
#container > p{
margin-top: 0;
}
ficou tudo colocadão na boa!!!
Lógico que deve ter outra forma (correta é claro), mas isso me adiantou muito!
Coloquei …
body {
margin: 0 auto;
padding:0px;
}
Tá colado no IE, FireFox e Ópera
Antes eu não tava usando Padding:0 px no body, aí ficava afastado só no Ópera
Qual navegador apresenta o comportamento correto
O Internet Explorer que honra as declarações de margens e paddings zerados ou o FireFox que acresenta uma margem?
R: O Firefox esta com a Margem do Paragrafo
Você sabe explicar porque isto acontece?
R: Margem do Paragrafo
Que declarações CSS devo usar para fazer o FireFox renderizar igual ao Internet Explorer?
R: Zerar as margens do Paragrafo. p{margin:0;}
E a resposta maujor? Tamo curioso
1-
QUEM ESTÁ CERTO?
FF
QUAL O EFEITO MAIS ESPERADO?
IE
2-
QUEM É O DONO DA MARGEM?
a margem é do elemento p quem gera a margem é a propriedade display: block (padrão de ‘p’), que cria uma margem superior e inferior ao bloco
PORQUE A MARGEM NÃO APARECE NO IE?
Não se engane! no IE a margem tbm aparece, no FF aparece o fundo amarelo, no IE você vê o fundo cinza mas a distância continua existindo.
ENTÃO ONDE ESTA O PROBLEMA?
O “problema” está na ALTURA do #container (pai de ‘P’).
Quando a altura do container pai não é definido quem define a altura é a soma das alturas do conteudo (propriedade height) nesse caso não entram as margens.
O fundo é renderizado começando a partir do inicio do bloco por isso o fundo aparece.
3-
COMO FAZER O FF EXIBIR IGUAL AO IE?
então não é para eliminar a margem, certo?? Você vai querer apenas que o fundo englobe as margens.
#container {
width:400px;
margin: 0 auto;
background: #ccc;
overflow:hidden;
}
essa opção serve pra ocultar todo o conteudo que exceder a area do #container, nesse caso como não foi definido uma altura as margens dos elementos filhos entrarão no calculo da altura.
(é aqui que a maioria esbarra quando está começando com CSS). Quem desenvolve só para o IE reclama que o FF “cria margens”. Já quem está acostumado com padrões fica enfurecido quando o IE aumenta o tamanho das DIV´s.
QUERO ELIMINAR AS MARGENS de ´p´! COMO FAÇO?
Isto significa( margin:0;)
vc pode fazer isso de 3 maneiras:
*{
margin:0;
}//as vezes generalizar pode nao ser o ideal pra você. Voce poderá acabar tendo que definir margens para todos os paragrafos… isso poderá lhe dar um trabalho desnecessário futuramente.
p{
display:inline:
}//isso vai acabar com a organização dos paragrafos
#container p{
margin:0;
}
4-
retire a propriedade margin:0; de body.
Oi pra todos. Galera meu ie7 esta lendo o !important do FF. Tipo eu defino um valor para margin-top: 10px; e depois redefino para FF , margin-top: 5px !important; ainda sim o coisa ruim do IE7 pega o !important alguem pode me dar uma ajuda?
Quem renderiza errado e sempre renderizou errado é o IE, e como tudo da microsoft que tenta definir um padrao proprio, sem levar em conta o padrao da web. O povo está tao acostumado a fazer pagina pro IE que acha estranho quando tudo nao funciona em outros browsers como mozilla, firefox, opera.. achando que o ie é o unico inteligente.
Cada navegador define um valor inicial para algumas propriedades de seus elementos.
Entao nao tem navegador errado, se vc nao quer te esse tipo de problema defina um valor inicial pra todos os elementos
Pra quem quiser uma solucao pronta procure o CSS reset do yahoo
:p
Olá amigos:
Testei o css reset, e esse não resolveu para mim, não sei pq, acompanhei igual o imasters.com.br passou.
Mais consegui resolver com
* { padding:0; margin:0; }
para firefox e ie
abraços
Para o FF exibir igual ao IE, fiz assim:
* { padding:0; margin:0; }
Já para o IE exibir igual ao FF fiz assim:
#container {
width:400px;
margin:0 auto;
background:#ccc;
margin-top:10px;
margin-bottom:10px;
}
#container>p{padding-top:0;
margin:0 auto;
}
No meu caso foi simples e o que me ajudou
* { padding:0; margin:0; }
!!! valeu a dica
olha meu site com resolvo isso?
http://www.lucianoferreiraolimpia.com.br/
no IE o anuncio fica no meio da pagina e no firefox fica certo la no topo onde eu quero que fique
da uma forcinha ainda
(entendo muito mais d php do css, pod uma coisa dessa?)
huhushus
desd ja agradeço
Uau, essa discussão ja dura 3 anos
#container{
padding:1px 0px;
}
Pra mim isso é um erro do Firefox, ele considera que se um bloco pai não tem borda nem padding então a margem de um elemento interno “escapa” pra fora do elemento pai.
assim a margem de p sai para fora do #container
Pelo que vi nos links indicados nesse debate, é correto colapsar margens juntas, mas pra mim é um correto burro.
Outra coisa burra do Firefox que eu acho é o fato do Padding ser externo às dimensões. No quadro com o código abaixo o quadro ficara com 30 de largura por 40 de altura e não 20×20 como seria mostrado no IE e parace o obvio.
.exemplo{padding: 10px 5px;
width:20px;
height:20px
}
Mas no mais, o Firefox é MUITO mais obediente aos códigos.
todos outros funcionam, hehe, no IE não.