Estilizando Tags – HR

Conheça a tag HR e suas limitações de estilo css

Segundo a Websemântica devemos utilizar os elementos para o seu real propósito, ou seja, se uma tag foi criada para dar parágrafo o seu próposito de existência não pode ser outro além de ter a função de exibi-lo.

O mesmo acontece com a tag HR ( Horizontal Rule) , onde o seu propósito é exibir uma linha para dividir conteúdo, com ela podemos dar mais sentindo a websemântica bem aplicada em um website utilizando as própriedades background, color e border. Porém o crossbrowser na estilização da HR se torna ineficiênte por parte de uma renderização distinta dos browsers.

Características:

• Propriedades de posicionamento, funcionam relativamente bem em vários browsers.
• Propriedade background-color, não funciona no Internet Explorer(6,7) e Opera, pois é exibido uma borda branca além da estilizada que é padrão da renderização dos browser.
• Propriedade background-image, idêntico ao problema acima, ele acaba exibindo em crossbrowser a imagem de fundo, porém existe uma margem branca que é padrão da renderização dos browser IE e Opera.

Alternativas & Conclusões :

• Background-color, se você estiver utilizando somente uma cor de fundo, você pode corrijir este  problema adicionando a propriedade css color,que fará o mesmo papel de background-color na tag <HR/> utilizando o Internet Explorer.
• Background-image, não é possivel fazer a tag exibir uma imagem de fundo pois a linha padrão de renderização continuara a circundar o elemento em questão. Surgiram algumas alternativas por parte dos desenvolvedores em se cerca a tag <hr/> com o elemento div:

Exemplo 1

Muitos desenvolvedores mantem a tag hr dentro da div para chegar mais próximo da semântica e não deixa-la vazia.

<div class="hr">
   <hr/>
</div>

.hr {
   background:url(image.jpg) no-repeat;
   border:solid 1px #ffffff;
}
 
hr {
display:none;
}

2 Comentários

Assine o Feed RSS dos comentários deste post | URL de TrackBack

1. 

   Adriano Comentário por 29 de janeiro de 2009 @ 17:51

   Opa, Consertou o Layout!! Maravilha!

2. 

   gadarf Comentário por 13 de abril de 2009 @ 2:48

   É pratica para dividir o conteudo.

Deixe um comentário