[Aide] Transparence sour IE 6 ? Hack !

Statut
N'est pas ouverte pour d'autres réponses.
L

L_S_

ex membre
Salut à tous, je désespère, j'essaie désepérement de créer des effets de transparence sous IE6 mais cela ne marche pas même avec le "hack" de cette page

http://www.logiste.be/wordpress/2007/12/05/quels-hacks-css-utilisez-vous/

Quelqu'un pourrait m'aider ?

Je vous remercie d'avance

Ps : j'ai aussi un autre problème, j'ai réussis à aligner mes deux div principales sur mon site sous IE, mais un problème persiste, le footer est de taille réduite par rapporte au "middle" comment régler ça ?
 
Tifox

Tifox

ou pas
Pour la transparence de tes png : quelques question qui pourraient nous aider a comprendre :
- Est-ce que la transparence marche sous Firefox ?
- Est-ce que ton png est une image dans le code html (donc dans une balise <img>) ou bien un background dans le css (donc un background-image) ?
- Est-ce que ce javascript améliore la chose ?
http://homepage.ntlworld.com/bobosola/pnghowto.htm
 
1er
OP
L

L_S_

ex membre
Tifox a dit:
Pour la transparence de tes png : quelques question qui pourraient nous aider a comprendre :
- Est-ce que la transparence marche sous Firefox ?
- Est-ce que ton png est une image dans le code html (donc dans une balise <img>) ou bien un background dans le css (donc un background-image) ?
- Est-ce que ce javascript améliore la chose ?
http://homepage.ntlworld.com/bobosola/pnghowto.htm
Cliquez pour agrandir...
Oui la transparence du png marche sous firefox

c'est une image mise en background via le css (quasiment toutes les images du menu, header, footer,... sont mises dans le css sur mon site)

pas tester je vais tester merci baucoup ;)
 
Tifox

Tifox

ou pas
Lilium a dit:
c'est une image mise en background via le css (quasiment toutes les images du menu, header, footer,... sont mises dans le css sur mon site)
Cliquez pour agrandir...
Alors effectivement ça ni le javascript que je t'ai donné, ni le hack que tu as donné ne marchera.
Pour faire ça, moi j'utilise :

Code: 
/* Pour Firefox */
html>body .background {
    background-image:url("chemin/image.png");
}
/* Pour IE et valeurs communes */
.background { 
background-repeat: repeat-y;
background-position:center right;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='chemin/image.png', sizingMethod='scale');
}
Ca marche parfaitement sous IE6/7 et Firefox 2, mais je n'ai aps encore testé sous d'autre navigateur.

Note, dans le code, GamerZ rajouté des espaces non-voulu sur la dernière ligne, il faut les supprimer.
 
1er
OP
L

L_S_

ex membre
Code: 
#header
{ width: 800px;
height: 305px;
background-image:url(header1.png);
background-repeat:no-repeat;

margin-left:auto;
margin-right: auto;
_margin-left: 40px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='header.png',sizingMethod='scale');
}
Je viens de tester sous IE ça ne marche pas apparement une erreur quelque part?

Ps la dernière ligne est bien comme ceci dans mon code : filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='header.png',sizingMethod='scale');

sans espace
 
Tifox

Tifox

ou pas
Ca ne marche pas parce que tu as mis a la fois le background-image et le filter (le filter contient déjà la référence vers l'image), donc ça applique bien le filter, mais ça met aussi la background-image qui n'a pas la transparence.

Essaye un peu

Code: 
#header
{ width: 800px;
height: 305px;
background-repeat:no-repeat;

margin-left:auto;
margin-right: auto;
_margin-left: 40px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='header.png',sizingMethod='scale');
}
Note que ce code ne marchera que sous IE
 
xlr8

xlr8

Over the rainbow 🌈
J'utilise cette méthode avec succès sur ie6, ie7 et firefox :)

Imaginons que tu aies un div général (à qui ont applique les réglages pour firefox et un div dedans avec les réglages pour IE

on aurait donc ceci :

Code: 
<div id="firefox"><div id="ie">le texte</div></div>
Au niveau des css voici ce que j'indique :

Code: 
div#firefox div#ie{text-align:left; width:666px; height:666px; text-align:left; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='medias/images/image.png', sizingMethod='scale')}
Code: 
div#firefox{ width:666px height:666px; background:url(../images/mb-bas.png) no-repeat !important;background-image:url(no-image);}
Le "!important" permet que cette instruction ne soit comprise que par Firefox. Pour el reste à toi évidement de régler les options de layout pour que ça aille bien :)

Voilà n'hésites pas si tu ne t'en sors pas :)
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut