PNG Transparent no IE6 e IE5 - Solução Definitiva

[Alexandre Gemellaro 0]

Gostei muito desta técnica, já implantei nos meus sites.

 

Porém gostaria de saber se não tem como incluir algum string igual ao 'img' para todos os backgrounds.

Pois todo background q existe uma PNG tenho que colocar a id ou classe dentro do código.

 

Obrigado desde já

[GabrielFerrari 41]

Gostei muito desta técnica, já implantei nos meus sites.

 

Porém gostaria de saber se não tem como incluir algum string igual ao 'img' para todos os backgrounds.

Pois todo background q existe uma PNG tenho que colocar a id ou classe dentro do código.

 

Obrigado desde já

Até onde eu sei ele já está nessa linha:

DD_belatedPNG.fix('#div1, #div2, img');

Eu uso eu não tive problema com nada.

Confira se o código está igual nas páginas

 

Qualquer posta ai.

[Henrique Barcelos 290]

Eu não sei vcs, mas eu fiz aqui, funciona td ok, mas quando eu recarrego a página, o IE dá erro e fecha... =/

[Thiago Retondar 18]

Aqui está totalmente normal. Já testei com background-repeat|position e funciona. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

[brcontainer 16]

Carlos hoje testei 100% o sistema, realmente cumpri o que promete, porem ele não funciona no IE5 somente a partir do IE5.5, então escrever IE5 da a entender do IE5.01 até o IE6.0, então seria legal se você troca-se o TITULO do tópico solicitando um dos moderadores do forum para que assim o titulo mais correto fosse:

PNG Transparent no Internet Explorer 6 e 5.5

PS.: Acreditem eu estou concluindo 2 sites por este mês e o layout dele esta quase perfeito no IE5.01 e IE5.5 que nem no FF, IE6|7, Opera, etc.

 

Foi dificil mas me rendeu muita experiencia ^^

e justamente por isso recorri a este tópico, para poder fazer o LOGO do site em PNG, e lendo o titulo pensei que funcionaria no IE5.01, mas não deu, porem quem sabe mais para frente surge outra solução(se bem que um dos motivos de ão funcionar é por que o IE5.01 não suporta FILTER-OPACITY), ainda estou tentando bolar um jeito do JPG se encaixar, assim dispenso o PNG.

 

Bem até a proxima amigos.

Atenciosamente Silverfox.

[Bruno Bernardino 0]

Oi Pessoal!

 

Sou bastante leigo em java e css.

 

Se alguém puder me ajudar dando um "passo a passo" bem simples vou agradecer.

 

Já tentei de algumas formas, mas nada.

 

Meu site:

www.ilhacarioca.com.br

[Thiago Retondar 18]

e ainda podemos juntar tudo:

 

<!--[if lte IE 6]>
<script src="DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
	<script type="text/javascript">
	  DD_belatedPNG.fix('#div1, #div2, img');
	</script>
	<![endif]-->

Não tem mistério:

 

na linha DD_belatedPNG.fix, entre parenteses, coloque os IDs, CLASS e nome dos elementos, por exemplo, IMG.

 

Coloca todas as identificações de PNGs ali dentro.

[Alexandre Gemellaro 0]

Gostei muito desta técnica, já implantei nos meus sites.

 

Porém gostaria de saber se não tem como incluir algum string igual ao 'img' para todos os backgrounds.

Pois todo background q existe uma PNG tenho que colocar a id ou classe dentro do código.

 

Obrigado desde já

Até onde eu sei ele já está nessa linha:

DD_belatedPNG.fix('#div1, #div2, img');

Eu uso eu não tive problema com nada.

Confira se o código está igual nas páginas

 

Qualquer posta ai.

 

Bem na verdade... no campo:

DD_belatedPNG.fix('#div1, #div2, img');

Está sendo incluso 2 ID's, com nome div1 e div2.

 

Isso eu já faço, mas se eu tenho background em 10 id's e/ou classes, tenho que incluir todas elas ali.

 

A minha pergunta é:

Existe uma forma de se incluir background, com uma linha de comando qualquer, igual foi inserida no caso o 'img'???

 

Aqui funciona perfeitamente, mas tenho que incluir todas as classes e ID's no campo.

[Bruno Bernardino 0]

e ainda podemos juntar tudo:

 

<!--[if lte IE 6]>
<script src="DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
	<script type="text/javascript">
	  DD_belatedPNG.fix('#div1, #div2, img');
	</script>
	<![endif]-->

Não tem mistério:

 

na linha DD_belatedPNG.fix, entre parenteses, coloque os IDs, CLASS e nome dos elementos, por exemplo, IMG.

 

Coloca todas as identificações de PNGs ali dentro.

 

OLHA O LEIGO AÍ DE NOVO!

Eu coloquei o código entre as tags head.

 

Eu tenho uma imagem "logo_ilhacarioca.png". Eu tenho que colocar no lugar do img?

 

Exemplo:

<!--[if lte IE 6]>

<script src="DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>

<script type="text/javascript">

DD_belatedPNG.fix('#div1, #div2, logo_ilhacarioca.png');

</script>

<![endif]-->

 

E que são IDs e Class?

[Thiago Retondar 18]

Por essa sua frase - Eu coloquei o código entre as tags head. - não sei se você resolveu o problema colocando ou tirando do <head>, de qualquer forma o script tem de ficar no <head>.

 

Se você colocar logo_ilhacarioca.png, talvez funcione. Ainda não testei. Mas se tiver mais de um png transparente na página, basta o img.

 

Um id e class possuem a mesma função. Porém o id deve ser único em uma página, ou seja, ele não pode ser repetir. Se quiser que se repita, é só usar class, pois esse sim pode se repetir. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

 

Abraços.

[Bruno Bernardino 0]

Realmente eu tenho mais de uma imagem em png. Daí vou substituir por img.

O que seria id e class. E como coloco isso no código?

[Thiago Retondar 18]

Ué... Eu respondi no meu último post. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

 

O id e class são atributos de elementos. Vou te dar um exemplo de cada um deles.

 

ID:

<div id="rodape"><address>Texto do rodapé da página.</address></div>

Veja que no exemplo acima, a palavra rodape ficou em colorido. Isso significa que aquele palavra identifica o elemento <div>.

 

CLASS:

<p class="destaque">Texto do seu parágrafo!</p>
<p class="destaque">Texto do seu parágrafo!</p>

No exemplo acima, coloquei uma class com o nome destaque. Ele classifica o elemento em que está.

 

Como disse no meu post anterior, a diferença é que o class pode repetir e id não. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

 

Abraços.

[Alexandre Gemellaro 0]

Realmente eu tenho mais de uma imagem em png. Daí vou substituir por img.

O que seria id e class. E como coloco isso no código?

Bruno, se você não conhece ID nem CLASSE, acho que deveria estudar um pouco de CSS.

O site http://www.maujor.com/ te explicará muita coisa.

 

 

[]'s

[kreator 0]

revivendo o tópico,como faço essa tecnica com arquivos externos,to montando um site e o logo esta como include em todas os meus arquivos php!!estou fazendo varios testes com as dicas q me passaram mais até agora nada!!

 

 

vou passar o code abaixo com um exemplo!!

 

banner_topo.php

 

<div id="banner_topo"></div><!-- banner_topo -->

<div id="logo_banner_topo"></div><!-- logo_banner_topo -->

<div id="banner_topo_2"></div><!-- banner_topo 2 -->

um arquivo q contem o include!!!

 

home.php

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.::BULLDOG PRESENTES ::.</title>

</head>

<?
include "css.php";
?>

<body>

<div id="fundo_paginas"></div><!-- fundo_paginas --> 

<?
include "banner_topo.php";
?>

<?
include "banner_empresa_escola.php";
?>

<div id="conteudo">


<div id="produto_1">
<ul>
<li><a href="?pg=menu camisetas"></a></li>
</ul>
</div><!-- produto 1 -->

<div id="produto_2">
<ul>
<li><a href="?pg=menu canecas default"></a></li>
</ul>
</div><!-- produto 2 -->

<div id="produto_3">
<ul>
<li><a href="?pg=aventais"></a></li>
</ul>
</div><!-- produto 3 -->

<div id="produto_4">
<ul>
<li><a href="?pg=menu quebra cabecas default"></a></li>
</ul>
</div><!-- produto 4 -->

<div id="produto_5">
<ul>
<li><a href="?pg=menu mouse pads default"></a></li>
</ul>
</div><!-- produto 5 -->

<div id="produto_6">
<ul>
<li><a href="?pg=menu babadores"></a></li>
</ul>
</div><!-- produto 6 -->

</div><!-- conteudo -->

<?
include "menu_principal.php";
?>


 

<?
include "menu_produtos.php";
?>





</body>
</html>

como eu colocaria essa tecnica,neste meu caso?????

 

brothers desde já agradeço http://forum.imasters.com.br/public/style_emoticons/default/joia.gif/>

[Thiago Retondar 18]

Pessoal, o tópico está super bem explicado. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> Basta colocar os nomes dos ids, class e/ou elementos, nesta linha: DD_belatedPNG.fix('#div1, #div2, img').

 

Dúvidas referentes a isso, coloquem no fórum principal de Webstandards. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

[brcontainer 16]

Pessoal, o tópico está super bem explicado. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> Basta colocar os nomes dos ids, class e/ou elementos, nesta linha: DD_belatedPNG.fix('#div1, #div2, img').

 

Dúvidas referentes a isso, coloquem no fórum principal de Webstandards. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

Concordo plenamente, o pessoal dificulta sem necessidade, o que é facil o pessoal esta complicando e acabam tornando dificil

 

Aprendam o BASICO do HTML/CSS e vocês não terão problema.

;)/>

[Henrique Barcelos 290]

Estranho que o problema do IE6 fechar parou de acontecer depois de uns 3 dias... O.o

 

Vai entender...

 

Tah quase perfeito... soh falta msm o suporte ao IE5...

 

Se bem que eu não costumo tentar adaptar meus sites pra browsers < IE6...

 

O 6 jah da uma #@?$%~ dor de cabeça... imagina 5.5 e inferiores...

 

Um belo dia eu resolvi abrir uma pagina aqui no IE 5.5... Gzuuuuis... deu té medo... O box model da kiança eh invertido =s

[Thiago Retondar 18]

Car, ainda é necessário fazer sites para Internet Explorer 5.5? Eu já parei no começo de meus estudos de CSS. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/>

[Alexandre Gemellaro 0]

Car, ainda é necessário fazer sites para Internet Explorer 5.5? Eu já parei no começo de meus estudos de CSS. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/>

Eu tb!!! O IE6 infelizmente ainda não tem jeito... mas que dá vontade de identificar o IE6 e redirecionar para página de download do FF isso dá!!!! rs

[brcontainer 16]

Estranho que o problema do IE6 fechar parou de acontecer depois de uns 3 dias... O.o

 

Vai entender...

 

Tah quase perfeito... soh falta msm o suporte ao IE5...

 

Se bem que eu não costumo tentar adaptar meus sites pra browsers < IE6...

 

O 6 jah da uma #@?$%~ dor de cabeça... imagina 5.5 e inferiores...

 

Um belo dia eu resolvi abrir uma pagina aqui no IE 5.5... Gzuuuuis... deu té medo... O box model da kiança eh invertido =s

Isso aconteceu provavelmente por causa do CACHE.

 

Car, ainda é necessário fazer sites para Internet Explorer 5.5? Eu já parei no começo de meus estudos de CSS. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/>

Eu ainda faço sites que funcionem no IE50.1 e IE5.5. E todos não usam HACKS, somente aquela gambiarra do !important do Firefox, Opera, Safari, etc.

 

Car, ainda é necessário fazer sites para Internet Explorer 5.5? Eu já parei no começo de meus estudos de CSS. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/>

Eu tb!!! O IE6 infelizmente ainda não tem jeito... mas que dá vontade de identificar o IE6 e redirecionar para página de download do FF isso dá!!!! rs

 

Claro que tem jeito sim, mas apenas a experencia leva a perfeição.

 

Não levem a mal o que eu falei, mas devemos pensar que ainda existe o uso do Win98 e do XP, portanto IE6 e até o 5 se faz necessario.