Gérer l'opacité sous IE7 et IE8 en CSS alors que ça marche sous FF3

bonjour
sur mon site http://mycomenius.free.fr/index.php?lng=fr j'affiche une icone "trop cool pour IE"
je souhaite gérer l'opacité en CSS, elle doit apparaitre à 100% lors du survol.
Mon code marche bien sous FF3 mais pas sous IE7
quand j'ajoute un width:100% l'opacité varie lors du survol sous IE7 mais le span n'apparait plus correctement et mon icone se place au centre de la ligne

pour bien voir la différence j'ai mis au dessous un 2è jeu d'icones avec la class infobis au lieu de info pour celles du haut.

<div style= 'position:absolute; left:15px; top: 60px; z-index:100;'>
				<a href='http://www.mozilla-europe.org/' target='_blank' class='infobis'><span>Bla bla bla<br/>Bla bla bla<br/>Bla bla bla<br/>Bla bla bla<br/>Bla bla bla<br/>Bla bla bla<br/></span>
					<img src='".CHEMIN." skin/skin_didier/autres/tropcool.gif' border='0'  /><br/>
					<img src='".CHEMIN." skin/skin_didier/autres/ie_ff.gif' border='0'  /></a>
				</div>

mon css:

a.info{

filter:alpha(opacity=50);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
opacity: 0.5;
}
a.info span{
display: none;

}
a.info:hover{
background: none;
filter:alpha(opacity=100);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
a.info:hover span{
font-style: normal;
font : 14px arial, helvetica, sans-serif;
display: block;
position: absolute;
top: 0px;
left: 410px;
background-color: #ffffff;
text-align: center;
text-decoration: none;
color: #000;
padding: 0.2em;
border: red 2px solid;
background: #ffc;
width:550px;
}
a.infobis{
opacity: 0.5;
filter:alpha(opacity=50);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

width:100%;
}
a.infobis span{
display: none;
}
a.infobis:hover{
background: none;
opacity: 1;
filter:alpha(opacity=100);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

}
a.infobis:hover span{
font-style: normal;
font : 14px arial, helvetica, sans-serif;
display: block;
position: absolute;
top: 0px;
left: 410px;
background-color: #ffffff;
text-align: center;
text-decoration: none;
color: #000;
padding: 0.2em;
border: red 2px solid;
background: #ffc;
width:550px;
}

merci d'avance
didier

Salut,

voir http://www.quirksmode.org/css/opacity.html

Au passage, ton message

a écrit :
Ce site est optimisé pour les navigateurs de dernière génération. Les limitations d’Internet Explorer risquent de rendre votre navigation désagréable

n'a aucun sens. D'abord parce que IE8 respecte les standards. Ensuite parce que le fait d'avoir placé du code avant le doctype provoque le basculement en mode quirks et que de toutes façons ta page comporte 182 erreurs de validation donc où est l'optimisation ?
Modifié par Heyoan (01 Jun 2009 - 00:35)

Heyoan a écrit :
Salut,

voir http://www.quirksmode.org/css/opacity.html

Au passage, ton message Ce site est optimisé pour les navigateurs de dernière génération. Les limitations d’Internet Explorer risquent de rendre votre navigation désagréable

n'a aucun sens. D'abord parce que IE8 respecte les standards. Ensuite parce que le fait d'avoir placé du code avant le doctype provoque le basculement en mode quirks et que de toutes façons ta page comporte 182 erreurs de validation donc où est l'optimisation ?

Et puis si IE8 EST un navigateur de dernière génération ! J'aime bien ce genre de message, en fait ça veut dire "le webmaster a eu la flemme de faire un site fonctionnel, ça marche que sous FF, mais on vous aura prévenus !"

salut
au lieu de descendre les collègues pourriez vous essayer de les aider?
je croyais que les forums étaient faits pour cela. j'ai toujours aidé sur les forums quand j'avais la solution. c'est la première fois que je vais sur alsacréation et j'espère que ça se passera mieux par la suite.

vous avez tous constaté un nombre important de problèmes liés à l'utilisation d'internet explorer qui ne reconnait pas toutes les instructions existantes et qui nous oblige à bidouiller.

on met au point un code qui marche nickel sous FF3 puis on va voir du coté d'IE et là que dalle!!!

je préfère:
1) bidouiller pour que ça marche quand même sous IE.
2) proposer une alternative à IE, je n'ai pas de problème avec firefox et de plus quand on peut éviter microsoft c'est pas plus mal.

maintenant chacun fait ce qu'il veut.
je reviens à ma question pour que cela marche quand même sous IE.

je ne comprend pas pourquoi quand j'ajoute un width l'opacité fonctionne mais pas le reste.

merci d'avance
didier

salut

Heyoan a écrit :
Ensuite parce que le fait d'avoir placé du code avant le doctype provoque le basculement ..........

j'ai fait mon site avec guppy et je n'ai rien changé à propos du doctype.
quel code y a t il avant ce foutu doctype?
merci
didier

didier6526 a écrit :
j'ai fait mon site avec guppy et je n'ai rien changé à propos du doctype.
quel code y a t il avant ce foutu doctype?

Si tu vas sur la page que tu indiques comme exemple, et que tu affiches le code HTML de la page, tu pourras consulter ce code. En l'occurrence il s'agit d'un script JS. Il est peut-être ajouté par certaines fonctionnalités de Guppy ou un de ses plugins.

Pour les aspects techniques:

À priori le problème constaté est qu'en l'absence de hasLayout le filtre DirectX pour l'opacité dans IE 6-8 n'est pas pris en compte. Le width:100% confère le layout au bloc, mais n'est pas souhaitable apparemment. Il y a cependant d'autres solutions. Pour le hasLayout, voir l'article à ce sujet dans la section Apprendre.

Sur le principe:

Les messages du type «trop cool pour IE» sont généralement inutiles. Aujourd'hui, la version d'IE qui pose réellement problème est IE6, et les utilisateurs d'IE6 a) soit sont mal à l'aise avec l'informatique et ne chercherons pas à faire de mise à jour ou à changer de navigateur (ils ignorent même ce qu'est un navigateur le plus souvent, ils vont juste «sur internet»), b) soit n'ont pas la possibilité de mettre à jour leur navigateur ou de changer (politique d'entreprise).

Mieux vaut prévoir un rendu simplifié pour IE6, voire ne rien faire, que de placer des messages inutiles et qui, pour certains, peuvent être perçus comme méprisants par les utilisateurs («trop cool pour...»).

Pour certains sites qui proposent un contenu ou des fonctionnalités peu conventionnels, notamment des applications web, on pourra avertir les utilisateurs d'IE6 que l'application n'est pas compatible avec leur navigateur, soit en amont soit sur les pages d'aide du site. Ça va dépendre du degré d'incompatibilité...
Modifié par Florent V. (01 Jun 2009 - 10:09)

didier6526 a écrit :

quel code y a t il avant ce foutu doctype?

Salut,

Si tu regardes attentivement tes sources, tu te rendras compte que tu as plein de scripts javascript avant le doctype. Il faut que tu mettes ces scripts dans le head html.

Je pense, qu'il ne faut pas trop forcer l'utilisateur a modifier son navigateur. Surtout que pour le cas de ton site je ne vois pas ce qui fait que l'on soit oblige d'utiliser firefox. Tout devrait marcher sous IE8-7 (pour IE6 je laisse tomber moi aussi )

salut
j'essaie de jouer sur l'opacité de mon icone
ça marche nickel avec firefox mais je n'y arrive toujours pas avec IE7
c'est le pourquoi de mon coup de gueule contre IE et microsoft, je n'ai jamais de problème en utilisant FF3. Je n'oblige personne à mettre firefox mais je le suggère, j'ai apprécié qu'on me le suggère il y a 2 ou 3 ans quand je ne connaissais rien au web.
maintenant si vous pouvez m'aider à faire apparaitre ce span avec une icone dont je peux faire varier l'opacité ça m'intéresse.
j'ai essayé de rajouter dans mon css des height:1% et des zoom:1 mais ça ne change rien.

sans ça l'opacité ne change pas mais j'ai monspan qui apparait au survol.
si je les mets, l'opacité varie mais je n'ai plus de span, il doit y avoir autre chose à modifier.
je vous redonne mon code pour l'icone du bas:

a.infobis{
zoom:1;
height:1%;
opacity: 0.5;
filter:alpha(opacity=50);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

}
a.infobis span{
display: none;
}
a.infobis:hover{
background: none;
opacity: 1;
filter:alpha(opacity=100);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
height:1%;zoom:1;
}
a.infobis:hover span{
font-style: normal;
font : 14px arial, helvetica, sans-serif;
display: block;
position: absolute;
top: 0px;
left: 410px;
background-color: #ffffff;
text-align: center;
text-decoration: none;
color: #000;
padding: 0.2em;
border: red 2px solid;
background: #ffc;
width:550px;
}

si j'y arrive j'utiliserai cette proprièté pour modifier l'opacité d'autres icones.
merci d'avance
didier