Teste-seu-conhecimento-02

View Comments

• 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 20x20 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.

• 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

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

  !!! valeu a dica

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

• 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

• 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

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

• Oi pra todos. Galera meu ie7 esta lendo o do FF. Tipo eu defino um valor para margin-top: 10px; e depois redefino para FF , margin-top: 5px ; ainda sim o coisa ruim do IE7 pega o alguem pode me dar uma ajuda?

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

• E a resposta maujor? Tamo curioso :)