28234 sujets

CSS et mise en forme, CSS3

[Résolu] Overlay "maison" complétement opaque sur IE6, IE7,

Bonjour,

Je rencontre actuellement un problème sur Internet Explorer alors que sur Firefox, les styles sont correctement interprétés.

J'ai une <DIV> juste après mon <body> et dont voici le code HTML (Attention les yeux)

<div id="overlay"></div>


Dans ma feuille de style, voici les instructions que je donne :

#overlay {
	position:fixed;
	top:0;
	left:0;
	margin:0;
	z-index:10;
	width:100%;
	height:100%;
	display:none;
	background:url(overlay.jpg) repeat-x top #8783d2;
	opacity:0.6;
	filter:alpha(opacity=60);
}


Le but étant d'afficher sur la totalité de l'écran une <DIV> translucide (ni totalement opaque, ni totalement transparente), comme ce qui est fait avec la Lightbox, la Fancybox ou Thickbox.

Le problème est que sur IE 6, IE 7 et IE 8, la <DIV> reste désespérément opaque alors que la valeur d'opacité est supportée par Firefox et Chrome.

Vous pouvez voir le problème sur cette adresse : (je supprime mon lien pour éviter l'indexation par Google)

Avez-vous une idée d'où pourrait venir le problème ?

Merci par avance pour vos réponses.

pH
Modifié par Pierre-Henri (27 Jan 2010 - 20:54)
filter : alpha(opacity=50);
-moz-opacity : 0.50;
opacity : 0.50;

marche chez moi... tous navigateurs, toutes versions...
ça vient pas de la combinaison image en background/alpha ?
Bonjour et merci pour ta réponse rapide.

Ne fonctionne toujours pas chez moi ... Même en retirant l'image dans la propriété background:

pH

EDIT/ Je viens d'essayer en mettant la <div id="overlay"> en bas de page, juste avant la balise </body> et le problème reste le même.

pH
Modifié par Pierre-Henri (27 Jan 2010 - 15:02)
Bon, je sais pas si c'est la réelle cause du problème mais quand j'ai essayé ton exemple, j'avais ceci.


<modération par Heyoan : merci d'utiliser l'option "Joindre une image / générer un aperçu" et d'éviter les images trop grandes qui déforment la mise en page du forum />

Ensuite j'ai essayé avec ceci

<div id="overlay"><span>asdasd</span></div>


#overlay span { display:none; }


Et je n'avais plus l'avertissement et ça fonctionnait. Peux-tu essayé sur ton site ?
Modifié par Heyoan (27 Jan 2010 - 17:13)
Je viens d'essayer et c'est pareil ... Définitivement opaque sur IE 6, IE 7 et 8.

Est-ce qu'il ne serait pas question de zoom:1, de hasLayout, et compagnie ? Je suis un peu perdu.

pH
Modifié par Pierre-Henri (27 Jan 2010 - 17:09)
http://www.w3schools.com/Css/css_image_transparency.asp

Essai de reprendre les exemples là même si à première vue ça ne semble pas ton code CSS qui ne fonctionne pas.

Donc puisque, niveau CSS, je vois rien qui cloche, peux-tu faire des tests avec ton overlay au niveau du script ? Tu utilises fadeIn / fadeOut de jQuery et j'ai aucune idée si ça peut être le problème mais ce serait bien de faire un test sans ça. D'utiliser jQuery pour faire display:block et display:none voir si le problème persiste.
Bonsoir,

J'ai trouvé la solution mais je ne sais pas si c'est la plus light.

J'ai supprimé les styles relatifs à l'opacité dans ma feuille de style CSS et j'ai mis ma <vid id="overlay" /> en display:none;.

J'ai confié la gestion de l'opacité à jQuery et ça fonctionne très bien.

Pour l'affichage de l'overlay, j'utilise maintenant les instructions suivantes :

$('#overlay').css('opacity','0');
$('#overlay').css('display','block');
$('#overlay').fadeTo("slow", 0.60);


Et pour la fermeture de l'overlay (soit au clic sur celui-ci, soit au clic sur le bouton Fermer de ma "popup"), celles-ci

$('#overlay').fadeOut(function() {
	$('#overlay').css('opacity','0');
	$('#overlay').css('display','none');
});


pH
Sujet clos
Aller à