Teste seu conhecimento 01

View Comments

• Tiago Cerri disse:
  isso está acontecendo por causa que todos elementos no IEca tem height relativo com o tamanho da fonte (BUG) se você passar font-size:1px; ele vai intender que naquela div você quer escrever alguma coisa com o tamanho de apenas 1px

  resumino:
  .separador {
  width:400px;
  font-size:1px;
  background: #ff0 url(’http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif’) repeat-x left;
  }

  Tiago..., não exite "BUG do height relativo" no IE6. As fontes possuem medidas ascendentes e descendentes. A altura que vc especifica da fonte é a medida entre a base-line até o topo, na maioria das fontes as letras maiúsculas não atingem o topo por uma questão de estética, se for necessário acentuar, a letra maiúscula teria que diminuir de tamanho (fica feio!). A parte descendente (abaixo da base-line) é reservada para caracteres como ç, j e vários outros caracteres.
  Alem disso no código do maujor ele também definiu um line-height:1.5em.

  Aquele "problema" ocorre porque em CSS também existe herança (HTML é uma estrutura hierárquica) e as propriedades de fontes são herdadas pelos “filhos” (Quando você altera a fonte da classe filha, está fazendo uma sobreposição), Isto ocorre no IE6, FIREFOX, OPERA.
  Isto NÃO é um BUG, isto não é ruim, tão pouco um problema (isso ajuda muito)

  Observe:

  Os filhos de body herdarão:
  font-size:12px;
  line-height:1.5em;
  font-family:Arial, Verdana, Helvetica, sans-serif;

  CSS:
  body {
  font: 12px/1.5 Arial, Verdana, Helvetica, sans-serif;
  }
  h2 {
  font-size:14px;sobrepos o tamanho
  color:#666;sobrepos a cor
  margin:0;
  }

  .bloco {
  herdou font e color (font:inherit; color:inherit;)
  width:400px;
  border:1px solid #ccc;
  margin:30px 0;
  }
  .separador {
  herdou font e color (font:inherit; color:inherit;)
  width:400px;
  height:1px;
  background:#ff0 url('sep.gif') repeat-x left;
  }
  

  Mas… o nosso famigerado IE6 renderiza de maneira “diferente” as propriedades width e height de um div em dois casos:

  Conteúdo excedente e overflow diferente de hidden
  Neste caso quem determina a altura são as propriedades do conteúdo (height, margin-top, margin-bottom, padding-top, assim por diante), o mesmo vale para a largura.

  Ausência de conteúdo e overflow diferente de hidden
  Neste caso a altura da div será definida por propriedade de altura (da própria div) ou entao pela por propriedades que tem relação com a altura (font, line-height) (padding ocupa espaço na div, ser for utilizado também será gerado um excesso em outros navegadores)

  por padrão, oveflow:visible;

  é por isso que o IE6 mostra aquele fundo amarelo.
  para visualizar estes problemas utilize uma borda de inspeção.

  para 2 situações... 2 soluções!
  Como disse o Bruno:

  
.separador {
width:400px;
height:1px;
overflow: hidden;
background: url(’http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif’) repeat-x top;
}


  ou...

  
.separador {
width:400px;
height:1px;
lineheight:1px;
background: url(’http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif’) repeat-x top;
} isso vai necessitar que exista algum conteúdo dentro da div.. eu sugiro um & nbsp ;
não recomendo esta solução... Estraga o que o CSS tem de melhor (separar programação do design)


  Agora... CSS HACK
  eu nao conheço nenhum!
  quem sabe um _overflow:hidden; mas isso nao faria sentido, não seria necessário o hack.

  Maujor mostra essa carta que você tem debaixo da manga... :)

• Bom, isso soluciona para fazer um separador. E para colocar o pontilhado como borda da div? Alguma solução?

• isso está acontecendo por causa que todos elementos no IEca tem height relativo com o tamanho da fonte (BUG) se você passar font-size:1px; ele vai intender que naquela div você quer escrever alguma coisa com o tamanho de apenas 1px

  resumino:
  .separador {
  width:400px;
  font-size:1px;
  background: #ff0 url('http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif') repeat-x left;
  }

• acabei esquecendo d falar... alem do overflow, coloquei o posicionamento do background como top... ae foi ;)

  e logicamente, tirei a cor amarela de fundo...

  talvez tenha outro modo... caso ache aki, posto...

• testei isso aqui e foi tranquilo...

  .separador {
  width:400px;
  height:1px;
  overflow: hidden;
  background: url('http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif') repeat-x top;
  }

• usar o IE7...

  tá tudo funcionando normal aqui...
  nenhuma das queixas citadas nesse post

• Se colocar só o overflow:hidden ele conserta, tudo bem, mas a imagem que simula o separador não aparece!!!

• Não sei se estou certo mais já de alguns bugs desse comigo, eu formatei o css deixando sem margin e padding igual Lucas Ferreira disse e passei font-size:1px;

• IE bugs pra variar.

  Há várias formas de resolver o problema.
  Testei o do Lucas Ferreira acima, e basta o overflow: hidden;

  Outra forma também é colocando um line-height:1px; e escrevendo algo dentro da div (pode ser um  ).

• Explicar porque q acontece eu não sei =/

  Mas acho que com isso aqui ja resolveria não?

  overflow:hidden;
  margin: 0;
  padding: 0;

  Obs.: Nem testei, mais a logica é que o overflow ajudasse hehe

  Abraços!