Jump to content

Archived

This topic is now archived and is closed to further replies.

Carlos Designer

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

Recommended Posts

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á

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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/>

Share this post


Link to post
Share on other sites

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/>

Share this post


Link to post
Share on other sites

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.

;)/>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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/>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.