Imagem PNG transparente

[CisoXP 2]

Oi turma!

 

Estou trabalhando no novo layout pro site da minha empresa e usando exclusivamente tableless e CSS positioning... Acontece que usei uma imagem em PNG com fundo transparente que, como todos sabem, o IE não renderiza corretamente, deixando um fundo cinza.

 

Já fucei a internet e achei algumas "soluções". Usei o filtro AlphaImageLoader, da Microsoft para fazer o PNG funcionar no IE.

 

<DIV ID="myDiv" STYLE="position:relative; height:259px; width:244px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bola.png',sizingMethod='scale');"></DIV>

 

Acontece que com esse plugin, a imagem não aparece no Firefox.

 

Gostaria de uma forma de fazer esse PNG funcionar bem em todos os navegadores... Nem que eu tenha que fazer uma CSS para cada navegador e um detecto de browser no site.

 

Qual a maneira mais simples?

 

PS: Achei também um comentário condicional que faz com que apenas o IE exiba o que tem dentro:

 

<!--[if IE]><DIV ID="myDiv" STYLE="position:relative; height:259px; width:244px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bola.png',sizingMethod='scale');"></DIV><![endif]-->

 

Mas aí se eu colocar algo fora para exibir no Firefox, o IE vai exibir os dois. Já vi também que não há um comentário condicional para outros navegadores (seria fácil, colocaria um comentário para cada navegador, assim eu colocaria o código certo para cada caso). Há alguma forma semelhante?

[sadboar 0]

Eu fiz isso com php kra... no php peguei o tipo de browser e se fosse ie eu aplicava esse filtro ai, senao eu jogava direto a png como fundo da div. Mas tb já encontrei uma vez um javascript q identificava o browser e fazia o filtro, só q eu achei ele mto grande e nao gosto de scripts grandes e desnecessarios. Se você procurar opacity.js no google é capaz de achar a pagina q eu encontrei este script.

[CisoXP 2]

Eu fiz isso com php kra... no php peguei o tipo de browser e se fosse ie eu aplicava esse filtro ai, senao eu jogava direto a png como fundo da div. Mas tb já encontrei uma vez um javascript q identificava o browser e fazia o filtro, só q eu achei ele mto grande e nao gosto de scripts grandes e desnecessarios. Se você procurar opacity.js no google é capaz de achar a pagina q eu encontrei este script.

O meu site está hospedado em windows (asp), então não posso usar php.

 

Já vi algo sobre o opacity também, mas também achei muito grande e complicado, queria algo mais simples.

 

Rafa, respondi lá...

[Giovani 104]

Não sei se ajuda! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

http://forum.imasters.com.br/index.php?sho...980&hl=png%

 

[]´s

[CisoXP 2]

Não sei se ajuda! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

http://forum.imasters.com.br/index.php?sho...980&hl=png%

 

[]´s

Deu certo sim!!

 

Eu já tinha achado esse código antes, mas tive preguiça de experimentá-lo, fiz agora e deu certinho. Assim a imagem aparece com fundo transparente perfeitamente nos dois navegadores.

 

Valeu Gio!