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

[Alexandre Gemellaro 0]

Quando disse:

O IE6 infelizmente ainda não tem jeito...

É justamente pela mínima fatia do mercado que ainda usa programas desatualizados!!!

Sei que em informática, tudo se dá um jeito. Porém se matar para desenvolver praticamente outro site só por conta de um IE5!!!

Fala sério... já temos tanta dor de cabeça com IE6 sem que o cliente, na maioria das vezes, saiba disso...

 

Sei que a conversa fugiu do escopo do tópico, mas tive que responder...

[brcontainer 16]

É justamente pela mínima fatia do mercado que ainda usa programas desatualizados!!!

Sei que em informática, tudo se dá um jeito. Porém se matar para desenvolver praticamente outro site só por conta de um IE5!!!

Fala sério... já temos tanta dor de cabeça com IE6 sem que o cliente, na maioria das vezes, saiba disso...

 

Sei que a conversa fugiu do escopo do tópico, mas tive que responder...

Claro ae você opta por querer ou não fazer um site para IE5, isto é uma opção, ninguem esta obrigando ninguem a isso. Pois como foi dito antes por você mesmo são SOFTWARES muito desatualizados. Porem o que eu quero dizer é que estamos falando de colocarmos novas funcionalidades nestes navegadores, como o caso do PNG. O que eu quero dizer é o seguinte é sim possivel fazer os sites ficarem iguais em nos navegadores IE5 até o IE8 sem hack nenhum. Porem é necessario MUITA pratica e por este motivo eu digo o IE6 tem sim JEITO. Ninguem é obrigado a fazer funcional no IE5 ou 6, mas acreditem pra mim esta pratica me fez ganhar muita experiencia e melhorar meus códigos CSS e HTML.

 

Não adianta sair atirando pedras no navegador, pois as vezes o erro(aliais muitas vezes) é por que ficamos presos a ideias erradas, como nos falta de SEMANTICA ou ficamos totalmente depentente de um FRAMEWORK javascript que faça todo o trabalho, sendo que as vezes um simples e bem elaborado CSS poderia fazer o trabalho correto e funcional em varios lugares. Como eu disse NÃO SEJAM PRESOS as ideias da maioria, tentem descobrir, aprender e se divertir.

[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

Isso aconteceu provavelmente por causa do CACHE.

 

 

O pior é que eu achei que fosse isso, limpei o cache, 3x, e continuou dando a mesma coisa... carregava, beleza. Se eu atualizasse ou clicasse em outro link para outra página (usando esse script) ele dava pau e fechava... =x

 

Mistérios que nem a Microsoft saberia explicar...

 

Quanto ao IE5... É realmente muuuuito complicado desenvolver um site que se apresente e funcione corretamente nele. Eu sei que tem solução pra isso, mas aquele box model invertido é palhaçada...

 

Já gasto horas e horas com o IE6 (antigamente gastava mais, vo aprendendo aos poucos http://forum.imasters.com.br/public/style_emoticons/default/grin.gif/> ), com os IEs 5.5- seria uma tortura... É uma fatia tão ínfima do mercado que acho que podemos nos dar ao luxo de simplesmente ignorá-lo, afinal, se não me engano, o IE 5.5 é de 1998... 11 anos atrás... Eh realmente muuuuito dificil nos dias de hoje encontrar computadores com essa idade.

 

Talveze um dia, qdo eu tiver a toa tente brincar com ele um pouco, mas por enquanto... NÃAAAAO...

[Henrique Barcelos 290]

Galera... achei um bug...

 

Fazendo um menu drop-left (horizontal xD) onde uso uma só imagem para dar efeito rollover, mudando apenas a posição, ao clicar, chamo uma função javascript que realiza a mudança de classe... Ao clicar, a opção selecionada deveria voltar ao normal, mas não volta quando eu uso esse script

 

Exemplo:

#compra_venda a {
	background: url(../Imagens/compra_venda.png) center top no-repeat;
}

#compra_venda:hover a,
#compra_venda.over a {
	background: url(../Imagens/compra_venda.png) center -34px no-repeat;
}

#compra_venda.selecionado a {
	background: url(../Imagens/compra_venda.png) center -68px no-repeat;
}

Não reparem nos caracteres estranhos nos comentários não... xD

window.onload = function(){
	//pego todos os elementos LI dentro do menu
	var itens = document.getElementById("menu").getElementsByTagName("li");
	for (var i = 0; i < itens.length; i++) {
		
		//Efeito Rollover para IE6, que não suporta a pseudo-classe :hover do CSS em elementos LI
		itens[i].onmouseover = function(){
			//se o elemento for o que estiver selecionado, eu adiciono a classe over. Ficará assim class="selecionado, over"...
			if (this.className.match("selecionado")) {
				this.className += ", over";
			}
			//se nãoo for o seleiconado, apenas defino o nome da classe como sendo over
			else {
				this.className = "over";
			}
		}
		
		//Mesma intenção do bloco acima, adiciona o Efeito Rollout para o IE6
		itens[i].onmouseout = function(){
			//se a classe do elemento contiver a palavra 'selecionado', 
			//defino esse como sendo o nome da classe quando o mouse sair de cima dele
			if (this.className.match("selecionado")) {
				this.className = "selecionado";
			}
			//se não, atribuo o valor vazio para a classe
			else {
				this.className = "";
			}
		}
		
		//Essa função faz a mudança de classe quando o elemento é clicado.
		//à necessária tanto no IE quanto no Fx, Op, Ch, Sa, etc...
		itens[i].onclick = function(){
			//faço com que todos os elementos voltem ao seu estado "natural", limpando o nome da classe...
			for (var i = 0; i < itens.length; i++) {
				itens[i].className = "";
			}
			//em seguida, faço com que o elemento clicado receba a classe 'selecionado'
			this.className = "selecionado";
			//isto aqui apenas impede que o link seja executado, no caso porque meus links são "#"...
			//Retire essa linha caso for utilizar...
			return false;
		}
	}
}

[japalfalfa 1]

Oi Henrique beleza?

estou com o mesmo problema...

no menu drop down ao invés de ele desaparecer o submenu ele fica...

tentei usar esse js mas não deu certo =/

 

Edit: inclusive acho que o menu drop down que estou usando é uma adaptação de um que você postou aqui no fórum

[Henrique Barcelos 290]

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif/> http://forum.imasters.com.br/index.php?showtopic=340960

 

Esse menu aí funciona no IE6... não uso transparências...

[Bruno Augusto 417]

Existe um plugin jQuery para esse script? Na página Plugins do site oficial até tem, mas aponta para um local inexistente.

 

Tentei os outros que aparecem em uma busca por "Fix PNG", mas esticaram minhas imagens de background. :(/>

 

Ese, via HTC, arrebentou todo o layout. <_</>

[brcontainer 16]

Ese, via HTC, arrebentou todo o layout. <_</>

Depende de como você estrutura seu HMTL e CSS, se você souber estruturar bem este HTC funciona 100%, não estou dizendo que você é incapaz, só estou dizendo que você pode melhorar ;)/>

 

Precisando da um toque ae.

Falow abraço

[Tabgyn 0]

Como faria para utilizar esse metodo com o uso do <?include ?>

 

Eu faço include de um arq. php q dentro dele te uma imagem png. Se eu coloco pra usar esse metodo de dentro do arq. q esta sendo chamado, ele perde a formatação do CSS (lightwindow), oq fazer?

[Thiago Retondar 18]

Dúvidas devem ser postadas no fórum principal!

 

 

Tabgyn,

 

sua dúvida é de PHP, poste por lá.

 

Tente fazer um echo com o script.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

[WDesign 0]

Boa carlos!

Funcionou perfeitamente aqui!com um porém,

eu tenho um js de flow e após inserir o script, o flow parou de funcionar apenas no ie6 :/,

abaixo o codigo:

<!--[if lte IE 6]>
 <script src="js/DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
        <script type="text/javascript">
          DD_belatedPNG.fix('#featured-image01,#featured-image02,#featured-image03,.boxtitle1,.sidebar-title1, img');
        </script>
        <![endif]-->
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/jquery.flow.1.1.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
    $("#myController").jFlow({
        slides: "#mySlides",
        width: "99%",
        height: "350px",
        duration: 400
    });
});
</script>

sou novo nessa area de js pode parecer simples mais já ta me dando uma certa dor de kbeça!

desde já agradeço a ajuda de vcs..

[Thiago Retondar 18]

Dúvidas devem ser postadas no fórum principal, e no seu caso no fórum de Frameworkd dentro de JavaScript Frameworks. ;)/>

 

Acho que deve ser alguma incompatibilidade de variáveis.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

[WDesign 0]

Dúvidas devem ser postadas no fórum principal, e no seu caso no fórum de Frameworkd dentro de JavaScript Frameworks. ;)/>

 

Acho que deve ser alguma incompatibilidade de variáveis.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

 

Thiago,sou novo no forum!

me desculpe!

vlw a dica ae!

[Voy 0]

Me ajudou muito, grato. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif/>

[Pedro Nauck 0]

Tem um probleminha com esse script, pelo menos comigo acontece bastante.

Por exemplo, eu fui usar uma div com background em png dentro de um jQuery

de slider e a imagem não ficou transparent no ie6, o que seria?

 

Se alguém pudér ajudar agradeço.

Abraços.