[Aide] Transparence sour IE 6 ? Hack !

Discussion dans 'Web, design' créé par L_S_, 4 Janvier 2008.

Statut de la discussion:
Fermée.
  1. Offline
    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 ?
    L_S_, 4 Janvier 2008
    #1
  2. Offline
    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
    Tifox, 5 Janvier 2008
    #2
  3. Offline
    L_S_ ex membre
    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 ;)
    L_S_, 5 Janvier 2008
    #3
  4. Offline
    Tifox ou pas
    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.
    Tifox, 5 Janvier 2008
    #4
  5. Offline
    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
    L_S_, 5 Janvier 2008
    #5
  6. Offline
    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
    Tifox, 6 Janvier 2008
    #6
  7. Offline
    xlr8 Elite
    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 :)
    xlr8, 8 Janvier 2008
    #7
Statut de la discussion:
Fermée.