28173 sujets

CSS et mise en forme, CSS3

Pb de lien sur png transparent sous IE6

salut

J'ai un énorme souci (et une petite voix dans ma tête qui me dit vivement IE7) Smiley biggrin

Pour gérer la transparence des .png sous ie j'utilise cette methode dans ma css:


#contenu{
 margin:0;
 padding:0;
 width:554px;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenu_milieu.png', sizingMethod='scale');
}

#contenu[ID]{
 margin:0;
 padding:0;
 width:554px;
 overflow:auto;
 background-image: url("../images/contenu_milieu.png");
}

#contenuhead{
 margin:0 0 0 0;
 padding:0 0 0 0;
 width:554px;
 height:373px;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenu_haut.png');
 background-repeat: no-repeat;
 background-position:top left; 
}

#contenuhead[ID]{
 margin:0;
 padding:0; 
 width:554px;
 height:373px;
 background-image: url("../images/contenu_haut.png");
 background-repeat: no-repeat;
 background-position: top left;
}

#contenufooter{
 margin:0;
 padding:0; 
 width:554px;
 height:21px;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenu_bas.png'); 
 background-position:0 0;
}

#contenufooter[ID]{
 margin:0;
 padding:0; 
 width:554px;
 height:21px;
 background-image: url("../images/contenu_bas.png");
 background-repeat: no-repeat;
 background-position:0 0;
}


ensuite j'ai un contenu qui se compose en 3 partie
"header" à taille fixe, le centre à taille variable et un "footer" à taille fixe

<div id="contenupage">
      <div id="contenuhead">
        <h1>titre</h1>
         
           <div class="positionphotopiece">
           <a class="photopiece" href="index.html">Voir d'autres photos de cette pièce</a>
           </div>

      </div><!--fin contenuhead-->

      <div id="contenu">
        <h2>Presse</h2>

         <div class="positionallpress">
         <a class="allpress" href="#">Lire toutes les revues de presse</a>
         </div>

      </div><!--fin contenu-->

        
      <div id="contenufooter">&nbsp;</div>

    </div><!--fin contenupage-->



avec le style de mes liens:

/*Premier lien*/
.photopiece {
 display:block;
 float:left;
 margin:0;
 padding:15px 0 0 0;
 width:500px;
}

.photopiece a{
 float:left;
 display:block;
 font-family:"Georgia", Arial, Helvetica, sans-serif;;
 color:#32426B;
 font-size:11px;
 text-decoration:none;
 padding:5px 0 0 10px;
 margin:0 0 0 0;
 text-align:right;
 height:22px;
}

.photopiece a:hover{
 color:#A3B0D3;
 text-decoration:none;
}

/*Second lien*/
.positionallpress{
 display:block;
 float:left;
 margin:10px 0 25px 0;
 padding:0;
 width:450px;
 text-align:left;
}
a.allpress{
 float:left;
 display:block;
 font-family:"Georgia", Arial, Helvetica, sans-serif;;
 color:#32426B;
 font-size:11px;
 text-decoration:none;
 padding:0 0 0 30px;
 margin:10px 0 0 0;
 text-align:left;
}

a.allpress:hover{
 color:#A3B0D3;
 text-decoration:none;
}


Sous Firefox, ça passe tranquille aucun probleme, sous ie, le premier lien n'a aucune reactivité alors que le second oui! Smiley biggol
J'ai essayé de mettre mon lien sous des tas de forme differente (<p> <span> <li> ...), de remplacer la class de mon lien par un id, d'enlever le div qui encadre mon lien, mais rien n'y fait. Smiley confus
Seul chose qui fonctionne c'est quand j'enleve la ligne de code qui gère la transparence sous ie ("filter: progid:DXImageTransform.Microsoft.AlphaImageLoader...")

Si quelqu'un a déjà rencontré ce problème et surtout s'il a une solution, ce serait hypa cool. Smiley ravi
Merci.
Modifié par gtex (28 Sep 2006 - 12:04)
Hélas! non Smiley bawling mais merci quand même.

Apparement ie gère mal les couches car quand je rafraichi ma page, mon lien reste un tres court instant actif, du fait que la structure de ma page se chargeant en 1er par le header, puis le centre et enfin le footer.
Superposition bizarre de mes DIV empeche que mon lien soit actif, j'ai essayé avec z-index mais sans succès...
Le truc c'est que ton script qui te fait passer les PNG reécrit le code pour IE et ça fou une bonne dose de code qui te font sauter le cursor:text; en cursor:default;

donc si mon code ne fonctionne pas, essaye de mieux le cibler 

monTag.monLienQuiBugEtqueJAimePas{cursor:text;}
Salut Tex, le web est petit Smiley smile

J'ai exactement le même souci et la seule chose que j'ai trouvé à faire c'est de reprendre un div externe à celui qui contient le background avec le png transparent et le coller par dessus...là tous les liens fonctionnent correctement.

du style....

<div id="monDivContenantUnPngTransparent">
</div>
<div id="contenuDeMonDiv">
-- >> moncontenu HTML avec mes liens
</div>

Il faut s'arranger pour que l'element contenuDeMonDiv se calle sur le Div initial...en position:absolute par exemple...

Je sais pas si j'ai été très clair et si dans ton cas tu peux appliquer cette astuce...

Si je trouve la solution propre je te tiens au courant..
Bonjour,

la réponse qui m'a été fournie, je ne sais plus où c'est:



a
{
position: relative;
z-index: 1; /* pour que ce soit au dessus de l'image sous IE */
}


et ça marche trés bien chez moi, les liens sont redevenus actifs.

Bon courage.
Sujet clos
Aller à