GeoWeb

Design e Tecnologia.

Personalizando a tag HR pro IE, Firefox, etc..

O Internet Explorer 6 que no passado foi um grande browser quando existia apenas o Netscape, hoje é o grande vilão entre designers e programadores. Talvez na época pela falta de profissionalização da área o IE era um sonho, ele aceitava tudo, tags fora de ordem, tags sem fechar, etc.. o IE não tava nem ai e mostrava tudo bonitinho.

Hoje felizmente a web já é mais profissionalizada e reina o xhtml, tableless e css validados e  o IE é o grande  temor de qualquer webdesigner, já que você tem que se desdobrar pro layout ficar correto nele.

Abaixo um truque pra que a feiosa tag <hr /> seja trocada por uma imagem e funcione em qualquer browser.

Esse é o modo tradicional que usava até então mas não funciona no IE.

hr {
  border : 0;
  height : 15px;
  background : url(hr.gif) 0 0 no-repeat;
  margin : 5px;
}

E esse é novo modo que descobri que funciona em todos os browsers inclusive o IE.

hr {
  display : list-item;
  list-style : url(hr.gif) inside;
  filter : alpha(opacity=0);
  width : 0;
}

Descobri no site borgar.net essa solução limpa em css, sem javascripts, jquery, etc..

Comments

comments