Iinternet Explorer et l'opacité

[Pistil]

Bonjour, ou plutôt bonsoir,

J'ai un problème (hé bien oui ça arrive!)

Je travaille sur le design d'un site, j'ai opté pour l'utilisation d'une image en background et d'une div #container à laquelle g attribué les paramètres suivants afin de laisser apparaitre l'image en background dans body

opacity: 0.90;
-moz-opacity: 0.9;
filter: alpha(opacity=90);

Jusqu'ici tout va bien, Le conte u du site est héritier de ces valeurs puisque se trouvant DANS la div #container.

Le seul beug que je rencontre est en fait l'image que j'utilise comme en tête (ou header, mais la mise en page est un peu différente) ou titre de page

Il s'agit d'un jpeg, avec un effet très "tuto" (un peu classique non?) avec un fond identique à celui du background (#333) et là... c'est le drame

Opéra, firefox -> Aucun problème le fondu se passe sans aucun problème!

Multiple IE's -> (du 5 au 7) l'image est éclaircit.

Et là je ne comprends pas. Voici l'URL de la page en question :

Cliquez ici !

J'ai longuement regardé différentes pour palier à mon problème

-gif -> mauvais résultat

-png -> je n'ai jamais réussis à faire fonctionner les hacks pour pour la transparence des png dans IE

J'ai également regardé différentes options de hack css pour ie (j'utilise déjà une css pour ie 7 et une autre pour les versions anterieures)

, j'ai également essayé la propriété zoom:1; qui me parait malgré tout un peu obscur.

Voici le lien de mes css:

les styles de textes

les styles de blocs

Si quelqu'un avait une solution à mon problème ça m'arrangerait pas mal, merci d'avance!

Pistil;)

Modifié 12 Juin 2007 par Pistil

[Djoule]

j'ai trouver un scrpit pour gerer la transparence des png sous ie, ça t'aidera peut etre...

code dans un ficher pngfix.js

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

Code a inserer dans le HEAD de ta page

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

sur mon site ça marche nickel, dis moi si ça le fait pour toi

(code trouver en acces libre sur le net mais je n'ai plus la source...)

[Pistil]

Salut,

j'ai essayé ta solution Djoule, et ça fonctionne. Comme solution paliative ça fera très bien l'affaire! Ceci dit pour ce genre d'images le png est quand même beaucoup plus lourd!

Mais l'important c d'avoir un bon résultat merci encore!

Pistil

[Djoule]

Le png est plus lourd oui, mais selon la qualité de l'image, tu peux la passer en png 8bit, ce qui allege considerablement le poids.

Le tout est de trouver le bon rapport poids/qualité...