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

O Imaster lançou uma campanha para que todos os desenvolvedores apliquem em seus sites um script, que ao navegar por ele, surge uma barra aconselhando a atualização do browser em vários tipos e modelos.

Para saber mais sobre a campanha acesse:
http://imasters.uol.com.br/crossbrowser/

Por fim, muitos grupos de desenvolvedores criaram correções utilizando javascript para solucionar o problema. A Unite Interactive fez um experimento muito positivo, desenvolvendo um script capaz de solucionar o problema de renderização com png no IE6, e possibilitando mais interação com as páginas da web em que outros scripts não possibilitavam.

Unit PNG Fix é um script compacto, com cerca de 1kb que promete :

• Corrijir a renderização de arquivos png no Internet Explorer 6.
• Viabilizar a aplicação em elementos img e âncoras.
• Não haver necessidade de nomear classes.
• Interagir com os atributos da propriedade background nas css.

Instalação:

• Faça o download do arquivo http://labs.unitinteractive.com/unitpngfix.php
• Aplique o código abaixo na tag head do seu arquivo html:

<!--[if lt IE 7]>
   <script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

Bom, levando em consideração que temos o objetivo de não salvar o Jpg com a borda e a descrição , mas sim produzir uma máscara via Css, criei um tutorial para mostrar como é simples fazer isso.

Então teremos 3 elementos:

1
2
3
4
5
6
7
8
9

<div class="box">
 
     <span class="mascara">
             Descrição da Imagem
     </span>
 
     <img class="img_dinamica" src="imagem.jpg" alt="Imagem" />
 
</div>

-Div (Box);
-Span (Máscara e descrição);
-Imagem (Dinâmica).

1º Passo

O primeiro elemento é a DIV (box) pai, ela comportará os filhos span e imagem, sendo a referência quando usarmos a propriedade “position:absolute”. Para criar uma falsa “máscara”, usaremos um span, porque ele contém a informação de texto de descrição da imagem e também será aproveitado como máscara. Então teremos as propriedades da div de class = “box”.

.box {
        position:relative;
	float:left;
}

2º Passo

Logo depois teremos o span de class = “mascara”, que conterá um background transparente. Inicialmente usaremos um gif para mostrar como funciona o conceito. Se você desejar, pode trabalhar com png e seu fix para o ie6, como já vimos no post destinado ao ie6pngfix. No span, além da propriedade background, faremos uso do position relative para habilitar o z-index, que é uma propriedade para trabalharmos com camadas, ao setar z-index=”1?, assim estou induzindo o css colocar esta imagem na camada de número 1, ou seja, à frente das demais. Os paddings e color servem para alinhar o texto de descrição que estará dentro do span de class = “máscara” e adicionar cor a ele.

.mascara {
	background:url(mascara.gif);
	width:184px;
	height:174px;
	display:block;
	z-index:1;
	position:relative;
	color:#fff;
	padding-left:12px;
	padding-top:5px;
}

3º Passo

Por último, utilizaremos a imagem que seja dinâmica, no sentido de ser uma imagem qualquer. Nela, adicionaremos duas propriedades básicas , o position absolute, que vai buscar referência que é a div com o position relative, e irá “flutuar” no ponto de top = 0.

.img_dinamica {
	position:absolute;
	top:0;
}

Diariamente muitas empresas que desejam transmitir o máximo de acessibilidade possível para seus clientes necessitam atender uma demanda de usuários, muitas dessas empresas atendem um público que varia muito, logo é necessário dispor de um meio de transmitir mais acessibilidade para ganhar confiança e acima de tudo valor. Acessibilidade requer o básico de qualidade, então se você ou sua empresa promove acessibilidade deve haver um trabalho ao menos organizado para isso.

Inicialmente no meu ponto de vista como estruturador a “Acessibilidade Primitiva” se da no momento em que o projeto web é entregue ao cliente, a partir deste ponto podemos dizer que existe o primeiro contato primitivo da acessibilidade, que é nada mais que verificar se tudo funciona conforme oque o usuário espera. Após este primeiro contato é gerado um resultado que acaba variando de usuário para usuário, então entra em cena o browser ou navegador, quando o navegador entra em cena ele acaba por avaliar a Acessibilidade Primitiva nos olhos do usuário atrávez da renderização gerada pelo browser.

No mercado atual existem um grande numero de navegadores a cada qual alguns deles acabam por interpretar e exibir o CSS de uma maneira diferente, assim causando a quebra da Acessibilide Primitiva, mas o trabalho do profissional web é justamente consertar este problema. Sempre achei que além de técnica o principal objetivo do profissional que trabalha com web em geral é gerar Acessibilidade, seja ele programação, designer ou estruturador (webstandard). Assim ele acaba por valorizar sua profissão e tambem por desenvolver seus conhecimentos técnicos. No caso do estruturador ele é constantemente forçado a gerar acessibilidade para a programação, banco de dados, mecanismos de buscas, navegadores, suporte e por fim o usuário final, e é justamente por isso que o profissinal que trabalha com webstandard não deve se restringir somente a regras ou padrões, mas sim tambem adotar o critério do conceito da acessibilidade primitiva.

Então o estruturador (webstandard) deve se alinhar para gerar acessibilidade e usar todas as ferramentas que dispor para que se tenha sucesso.Para isso tambem existe o CSS que nos browsers estão diretamente ligados com a acessibilidade e esse é um dos principais problemas que podem deixar a dúvida da qualidade de sua empresa para um cliente, então não peque por ver que seu css não funciona no IE6, procure alternativas de solucionar o problema de um modo que não destrua a qualidade do seu trabalho, que tambem não limite a acessibilidade primitiva e principalmente que não limite o seu código CSS, lembre-se muitas empresas procuram um profissional que acima de tudo saiba resolver qualquer problema relacionado a sua área, ou então discuta com o cliente que ele não deve ter uma animação linda na home da sua página mostrando fotos da sua empresa e seus grandes métodos produtivos pelo simples fato de que o google ainda é um bebe neste método de indexação, mas pera ai ? Slide show ? Solução? Jquery. O simples fato de fazer a melhor escolha e deixar o cliente satisfeito e gerar a acessibilidade com satisfação.