Titre: Pb de lien sur png transparent sous IE6
Posté par: gtex le le 28-09-2006 a 12:08:20
salut
J'ai un énorme souci (et une petite voix dans ma tête qui me dit vivement IE7)
Pour gérer la transparence des .png sous ie j'utilise cette methode dans ma css:
Code:
#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
Code:
<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"> </div>
</div><!--fin contenupage-->
|
|
avec le style de mes liens:
Code:
/*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!
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.
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.
Merci.
|
Titre: Re:Pb de lien sur png transparent sous IE6
Posté par: Netah le le 28-09-2006 a 14:44:28
Regarde dans le forum "design" ou "infographie"... Le sujet a été souvent traité.
C'est que tu ne fais pas bien ton png. IE6 ne gere pas la couche alpha. Pour faire un png transparent, tu dois utiliser la meme methode que pour un gif. |
Titre: Re:Pb de lien sur png transparent sous IE6
Posté par: gtex le le 28-09-2006 a 16:50:46
J'ai essayé de faire différent export de png transparent et toujours le meme problè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... |
Titre: Re:Pb de lien sur png transparent sous IE6
Posté par: Netah le le 28-09-2006 a 17:26:33
Arf, j'avais répondu trop vite ::)
Le pb vient surement de la config de IE. Chez moi, ta page ne fonctionnera pas (activX désactivés), sur mon portable (IE7), ca marchera mais pas pour ce que tu as fais. Au bureau, ca marche surement.
Le plus simple et le plus compatible est encore de ne pas utiliser la couche alpha sur du png (au moins pour l'année à venir... Apres ca ira)... Fais ton png comme tu ferais un gif transparent (ds photoshop, export pour le web, choisi les couleurs à rendre transparentes).
|
Titre: Re:Pb de lien sur png transparent sous IE6
Posté par: gtex le le 06-10-2006 a 17:03:10
merci pour ta réponse! en effet j'ai laissé mon menu en png transparent (qui curieusement fonctionne), et le reste la bonne vieille méthode du jpg calé au pixel :(...
a+ |
Titre: Re:Pb de lien sur png transparent sous IE6
Posté par: OKKO le le 09-10-2006 a 13:58:45
pour ton filtre transparent j'utilise ce code la :
opacity:0.1; filter:alpha(opacity=10); -moz-opacity:0.1;
sinon je t'ai trouvé ce "" lien """ (http://www.webdesignskolan.com/css-effekter/opacity/opacity_exempel1.htm) |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|