[Resolvido] Texto sobre PNG some com script para IE6

[Marcos Silveira 0]

Olá amigos,

 

Procurando por soluções para PNG transparente, encontrei o seguinte: http://forum.imasters.com.br/index.php?/topic/325686-png-transparent-no-ie6-e-ie5-solucao-definitiva/

 

Porém mesmo assim continuo com problemas...

O PNG fica perfeito, porém o texto (escrito no próprio html) não aparece.

 

Para melhor entendimento, um print sem o script e outro com o script:

 

 

HTML:

<div id="bemvindo"><img src="images/bem-vindo.png" />
<div class="texto-bemvindo"><p>Desde 2007, a <a href="http://www.rpeventosrs.com.br/rpeventos.html">RP Eventos</a> é destaque em organização de feiras, festas, seminários, exposições, ações promocionais, eventos empresariais, técnicos ou festivos.
Constantemente atenta ao mercado, a <a href="http://www.rpeventosrs.com.br/rpeventos.html">RP Eventos</a> sempre contou com o auxílio técnico de fornecedores especializados e com experiência no desenvolvimento de projetos personalizados, que dividiam com a empresa a visão de agregar valor ao evento, com um diferencial para cada cliente.</div></div>

 

CSS:

#bemvindo{
background: center;
width: 745px;
margin: 95px 0 0 30px;
height: auto;
position: absolut;
}

.texto-bemvindo{
   text-align: justify;
  	margin: -185px 0 0 27px;
  	width: 470px;
  	font-size: 13px
}

 

Obs: Já recebi orientações pra evitar o "position", mas como já estava com essa parte feita e é só um quebra-galho pra ser publicado essa semana, acabei deixando. Não sei se o problema pode estar sendo gerado por isso.

 

Obs2: Enquanto fazai o upload da screen, vi que se eu deixar o texto acima da imagem no HTML, o texto aparece, porém no topo da página e preciso fazer vários ajustes. Essa é a única solução ou tem algo mais direto e rápido?

 

Obrigado desde já! Abraços!

[Evandro Oliveira 331]

defina a bem-vindo.png como plano de fundo da div bemvindo

 

#bemvindo { background: url('images/bem-vindo.png'); }

[Marcos Silveira 0]

Evandro, obrigado pela sugestão, porém não funcionou.

 

Ao definir como background, a imagem se repetiu pela página, mas creio que isso eu poderia resolver informando as dimensões do arquivo, mas o fundo ficou sólido novamente, e mesmo assim o texto não aparecia.

 

Substitui tanto o CSS atual (trocando "background: center;" por "background: url('images/bem-vindo.png');" em #bemvindo, como também deixei apenas a linha que você me passou, mas não funcionou.

 

Alguma outra sugestão?

 

Abraços!

[Nícolas 4]

Cara, mesmo com esse js o método que até hoje utilizo é este.

http://forum.imasters.com.br/index.php?/topic/223512-boa-dica-png-com-transparencia-no-ie/

 

Acho muito melhor, tenta ae.

[Marcos Silveira 0]

Nícolas, esse funcionou perfeitamente! Muitíssimo obrigado!

 

Apenas uma dúvida, no seu código está "<!--[if lt IE 7]>", o "lt" quer dizer que é para funcionar no IE 7 e nas versões antecessores a ele, correto? Teria algum problema eu deixar "<!--[if lt IE 6]>" para caso eu queira um CSS exclusivo para o IE6, que seria onde estaria o script, para o IE7 e o principal para Firefox, Chrome e Opera?

 

Pergunto isso pois o site muda bastante do IE6 para o IE7, testei alguns scripts que diziam melhorar mas não tive efeito, então terei que deixar o estilo do IE6 fora do IE7 mesmo.

 

Abração e obrigado!

[Nícolas 4]

Tópico: Comentários Condicionais

http://forum.imasters.com.br/index.php?/topic/247738-comentarios-condicionais/

 

No tópico que passei tem um erro de digitação justamente nesta linha em negrito que é a que nos interessa.

 

Tipos de Comentários Condicionais

<!--[if IE]><![endif]--> Se a versão do navegador for IE.

<!--[if gt IE 5]><![endif]--> Se a versão do navegador for superior ao IE5.

<!--[if gte IE 5]><![endif]--> Se a versão do navegador for igual ao IE5 ou superior.

<!--[if lt IE 5.5]><![endif]--> Se a versão do navegador for inferior ao IE5.5.

<!--[if lte IE 6]><![endif]--> Se a versão do navegador for igual ou inferior ao IE6.

 

glosário

gt - maior que o browser setado (greater than)

gte - maior ou igual ao browser setado (greater than or equal to)

It - menor que o browser setado (less than)

Ite - menor ou igual ao browser setado (less than or equal to)

 

<!--[if lt IE 7]>

Neste caso o uso seria para a versão inferior a IE 7.

 

Bom, mas cara o que você quiser limitar de um browser para outro pode utilizar as condicionais.

 

Mas uma dica que te dou é não criar CSS's para cada navegador, isso só complica a manutenção.

 

Cara tente montar o melhor possível sem o uso de hacks, praticamente todo o site que montei está igual em todos os IE's, Firefox, Opera e etc.

 

Sem usar hacks, só lembro de umas 4 vezes que usei hack até hoje, todos por preguiça ^^

 

O negócio é você achar outras formas de fazer a mesma coisa, outras lógicas para a montagem.

 

No começo apanhava bastante para evitar usar hacks, mas depois fui usando essas mesmas lógicas em tudo e hoje em dia não tenho mais problemas.

 

Mas uma coisa eu já comecei a fazer, abandonei o IE 6.

 

Desde o inicio de 2010 não faço mais sites vendo o IE 6, o próprio Youtube já encerrou seu suporte ao IE6.

 

Já não faço mais justamente não deixar mais usuários leigos no comodismo e atualizar o navegador.

 

É uma dor de cabeça e tanto a menos viu ^^

 

Mas como falei cara, foca em tentar resolver tudo sem hacks, cada detalhe tem seu macete.

 

Exemplo:

 

Marcadores de li nunca coloco do list-style, sempre coloco uma imagem de bullet como background do li sem repetição com posicionamento determinado por pixel (colado na esquerda e de 5 a 8px do topo dependendo da altura da linha), dou um padding-left de uns 15 px;

 

.marcadores li {
background: url(../img/marcador.jpg) no-repeat 0px 7px;
padding-left: 15px;
line-height: 20px;
}

 

List-style cada navegador tem sua forma de rendenizar, usando essa forma e um bom CSS Reset fica tudo perfeito.

 

 

Existem várias configurações de reset que você pode fazer eu uso essa do primeiro link, mas sem o condicional para o IE, e somente essas duas folhas.

 

<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/ie.css"/>

 

Fica tudo certinho nos navegadores.

 

Cara, sempre use um CSS Reset e procure outras lógicas para montar sua estrutura quando estiverem diferentes.

 

Depois que você se habitua as formas que não conflitam, rapidinho se monta um site compativel com todos os navegadores sem nenhum hack.

 

^_^