[Resolvido] Diferença entre ie e firefox

[BAR WEB 0]

galera, tenho uma animaçao em css + jquery.

coloco imagens em png com fundo transparente.

 

no firefox beleza, funciona 100%.

 

agora no ie as imagens estao puxando o fundo do body da index, ja que uso include para puxar o codigo da animaçao.

 

o que devo fazer???

 

<style type="text/css">
.slideshow1 { height: 204px; width: 490px; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
   $('.slideshow1').cycle({
	fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<?php
include"includes/conecta.php";
$sqltopo = mysql_query("SELECT * FROM topo ORDER BY RAND()", $conexao);
   $resultsss = mysql_num_rows($sqltopo);
?>
<div class="slideshow1">
	<?php
 		while ($topo=mysql_fetch_array($sqltopo)) { ?>
       <img src="imgs/envios/<?php echo $topo[1] ?>" width="490" height="204" /><?php } ?>
</div>

 

como faço para no ie tbem ficar transparente?

[Guilherme Oderdenge 42]

Em qual Internet Explorer você se refere? Antes do 7, eles não conseguiam traduzir a transparência das imagens PNG.

 

Se você estiver utilizando o 6, pode utilizar um PNG Fix.

 

Do contrário, poste um exemplo do que está acontecendo para darmos uma olhada e encontrar uma solução.

[BAR WEB 0]

o problema e esse, meu ie e o 8.

 

da uma olhada.

topo no internet explorer com erro e sem a transparencia:

 

topo no firefox com a transparencia, no crhome tambem fica ok

[Guilherme Oderdenge 42]

Na imagem com o degradê, de fundo, você definiu uma largura? Se sim, um float: left, definiu também?

 

Poste o seu código CSS aqui para darmos uma olhada, porque o problema não é na transparência.

[BAR WEB 0]

css da animação é:

 

<style type="text/css">
.slideshow1 { height: 204px; width: 490px; }
</style

 

e da index é:

 

<style type="text/css">
<!--
body {
background-image: url(imgs/fundo.jpg);
background-repeat: repeat-x;
background-position: 0px 0;
margin: 0px;
background-color: #2D83E8;
}
-->
</style>

 

pelo que vi ele esta colocando o background-color: #2D83E8; como fundo dele.

esse background-color e para completar quando o fundo da imagem termina para nao ficar branco apos.

[Guilherme Oderdenge 42]

Sim, entendi. Vamos ver o que podemos fazer... hmmmm...

 

Isto é incorreto:

<style type="text/css">
<!--
body {
       background-image: url(imgs/fundo.jpg);
       background-repeat: repeat-x;
       background-position: 0px 0;
       margin: 0px;
       background-color: #2D83E8;
}
-->
</style>

 

Ok? Essa regra deveria estar na sua folha de estilo em cascata (no caso, no seu arquivo .css).

 

E dei uma otimizada nela:

body {
       background: url(imgs/fundo.jpg) repeat-x 0 0 #2D83E8;
       margin: 0px;
}

 

Viu como ela ficou mais elegante?

 

Enfim, quanto ao seu erro, então quer dizer que aqueles pescadores ali são um slideshow, huh?

 

Se sim, o que está acontecendo com o fundo ali é que ele não consegue estender até o slideshow.

 

Tente definir esta linha com um float: left:

.slideshow1 { height: 204px; width: 490px; float: left; }

[BAR WEB 0]

Guilherme, mesmo com as alteraçoes no ie continua a m***** do fundo azul.

 

eu fiz um teste aqui, retirei o codigo do azul do body, ai o fundo no ie fica branco.

[Guilherme Oderdenge 42]

Mostre-me o CSS com o fundo que você quer que fique de fundo aos pescadores.

[BAR WEB 0]

segue codigo da animação:

 

<div id="topofundo"><table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td width="77%"> </td>
   <td width="23%"><?php include"php/animacaotopo.php"; ?></td>
 </tr>
</table>
</div>

 

a div topofundo esta:

 

#topofundo {
width: 822px;
text-align:left;
margin: 0 auto;
background-image: url("../imgs/topomod1.png");
	}

[Guilherme Oderdenge 42]

Table? Que isso meu chapa? :huh:

 

Já conhece o Tableless?

 

Enfim, tente:

#topofundo {
       background-image: url("../imgs/topomod1.png");
       width: 822px;
       text-align: left;
       margin: 0 auto;
       float: left;
}

[BAR WEB 0]

estou começando agora com tabless, css, enfim mudando meus conceitos.

bem mais simples de se montar um layout, mais devido a pressa usei tabela.

 

Agora voltando ao nosso assunto, continua na m***** do explorer o fundo azul, ai como falei pra ti, se retiro a cor ele fica branco.

 

ja pesquisei na net e nada.

[Guilherme Oderdenge 42]

Isso, vai estudando os conceitos. :)

 

Enfim, é questão de alinhamento, não de cor ou algo assim. O que está acontecendo é que a div de fundo não está conseguindo ser estendida até atrás dos peixeiros ali (ahuha).

 

Ou... peraí... vamos debugar.

 

Altere o background dos peixeiros para transparent e veja o que acontece.

 

-----------------

Edit

 

Ou então, tente fazer isso:

 

#topofundo {
       background-image: url("../imgs/topomod1.png");
       width: 822px;
       text-align: left;
       margin: 0 auto;
       float: left;
}
.slideshow1 { height: 204px; width: 490px; float: left; clear: both; }

[BAR WEB 0]

mesmo assim no ie continua o fundo azul.

percebendo, ele no tamanho da imagem fica azul.

 

agora me responde uma duvida. como pode no firefox, crohme ficar ok e no ie dar esse pau.

 

o que pode ser?

[Guilherme Oderdenge 42]

Se tu pudesse hospedar o site on-line pra gente ver ficaria mais fácil lidar com o seu problema.

 

E assim, o Internet Explorer 8 é um lixo na minha opinião. Ele está totalmente fora das técnicas modernas de desenvolvimento de sites, portanto, temos que ter paciência - ainda mais porque ele (ainda) é um dos mais utilizados pelos internetautas.

 

Eu já não estou mais entendendo o seu problema. Se nada aconteceu com essas soluções que te passei, tem algo a mais que não está encaixando.

 

Upe seu site e poste o link aí para dar uma olhada.

 

Abraço.

[BAR WEB 0]

Guilherme:

 

http://pescandocomamigos.com/teste.php

 

da uma olhada.

 

o ie e uma m***** de lixo, so que meu cliente so usa ele e da pau nele, agora pensa.

 

hahaha

[Guilherme Oderdenge 42]

Eu imagino como é. Também lido bastante com isso hahaha.

 

Então, encontrei a solução. E eu já tinha dado ela para você, mas você não deve ter prestado atenção. Ela estava aqui.

 

Lembra do background transparent? Pois é. Veja só:

 

 

 

 

 

 

O IE 8 renderiza o background-color em imagens transparentes, o que não acontece nos navegadores modernos. Para solucionar isso, basta remover o background-color (ou indicar "transparent") da imagem/classe/camada dos peixeiros.

 

Se por ventura ficar essa borda azul contornando as suas imagens, dê um border: 0; e voi là!

 

Entendeu?

[BAR WEB 0]

cara, perdao minha ignorancia.

mais como estou começando no css agora estou meio confuso agora.

 

eu modifiquei o meu css mais nao deu certo.

 

body {
       background: url(../imgs/fundo.jpg) repeat-x 0 0 #2D83E8;
       margin: 0px;
}

#topofundo {
       background-image: url("../imgs/topomod1.png");
       width: 822px;
       text-align: left;
       margin: 0 auto;
       float: left;
	background-color: transparent;
}
#slideshow1 { height: 204px; width: 490px; float: left; clear: both; background-color: transparent; }

 

tentei modificar o topofundo colocando transparent nele e no slideshow1 que e o slide e mesmo assim nao deu certo.

 

o que fiz de errado.

 

e desculpe por estar incomodando.

[Guilherme Oderdenge 42]

Incomodando? Que isso, cara! Estamos aí pra isso.

 

Para testar, adicione no seu código:

#slideshow1 img {
   background-color: transparent !important;
}

 

E diga-nos o que aconteceu.

 

Abraço! :thumbsup:

[BAR WEB 0]

cara funcionou vlw.

agora so uma duvida.

 

sempre quando for imagem criou outro?

 

slideshow1 img {

 

por exemplo???

[Guilherme Oderdenge 42]

cara funcionou vlw.

agora so uma duvida.

 

sempre quando for imagem criou outro?

 

slideshow1 img {

 

por exemplo???

 

Depende. O "erro" se dá porque você definiu uma cor de fundo para os pescadores (acredito que via JavaScript), e portanto, neste caso, a transparência vai ser preenchida com a cor definida.

 

Mas enfim, para fazer a prevenção do problema para todos os casos, basta fazer:

 

img {
  background-color: transparent;
}

 

Entendeu?