Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Teste-seu-conhecimento-02

Publicado em: 2006-11-14 — 18.610 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:

  1. 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?
  2. Você sabe explicar porque isto acontece?
  3. Que declarações CSS devo usar para fazer o FireFox renderizar igual ao Internet Explorer?
  4. 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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.

23 comentários na matéria: “Teste-seu-conhecimento-02”

  1. AndreasNo Gravatar disse:

    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.

  2. juninhoNo Gravatar disse:

    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

  3. flaviaNo Gravatar disse:

    No meu caso foi simples e o que me ajudou
    * { padding:0; margin:0; }

    !!! valeu a dica

  4. DarioNo Gravatar disse:

    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;
    }

  5. Carlos EduardoNo Gravatar disse:

    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

  6. Marcus ViníciusNo Gravatar disse:

    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

  7. Maximus DecimusNo Gravatar disse:

    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.

  8. teoNo Gravatar disse:

    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?

  9. Tadao KurodaNo Gravatar disse:

    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.

  10. MicoxNo Gravatar disse:

    E a resposta maujor? Tamo curioso 🙂

  11. Fernanda AssunçãoNo Gravatar disse:

    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;}

  12. Everton PabonNo Gravatar disse:

    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

  13. Leonardo L ProcópioNo Gravatar disse:

    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!

  14. Jean Carlo EmerNo Gravatar disse:

    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

  15. Alfredo HolffmanNo Gravatar disse:

    div#container p:first-child {
    margin-top: 0px;
    }

  16. Bruno DulcettiNo Gravatar disse:

    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…

  17. BrunoNo Gravatar disse:

    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…

  18. Cledison Eduardo FritzenNo Gravatar disse:

    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.

  19. MicoxNo Gravatar disse:

    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. 🙁

  20. Pedro RogérioNo Gravatar disse:

    Simples,

    Só usar o seletor universal igual ao Lucas fez!!!

  21. Francisco Arisa JuniorNo Gravatar disse:

    Como o amigo respondeu consegui resolver com

    * {
    padding:0; margin:0;
    }

  22. Rodrigo AramburuNo Gravatar disse:

    coloquei apenas

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

    e funcionou, não sei se esta correto

  23. Lucas AlvesNo Gravatar disse:

    ante da declaracao body {}
    Coloquei * { padding:0; margin:0;} e funcionou!

    Abraços

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo