28234 sujets

CSS et mise en forme, CSS3

Transparence partielle : passe pas sous IE [resolu]

Salut,

J'affiche un popup jQuery dont le CSS est : 


#background_popup {
	height: 100%;
	width: 100%;
	background: #000000;
	position: absolute;
	top: 0;
	-moz-opacity:0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
	filter:alpha(opacity=75);
}
#popup {
	border: 8px solid #353230;
	position: absolute;
	top: 50%;
	left: 50%;
	background: white;
        width: 400px;	
        height: 200px; 
        margin: -100px 0 0 -200px;
}


Sous FF/chrome, derriere le popup tout devient gris et partiellement visible, mais sous IE tout devient noir ! Pourquoi ?
Modifié par apericube (02 Feb 2010 - 19:15)
Salut,

Bien suivi ton conseil Hermann :


#background_popup { 
	height: 100%; 
	width: 100%; 
	background: #000000; 
	position: absolute; 
	top: 0; 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	filter:alpha(opacity=75); 
} 
#popup { 
	border: 8px solid #353230; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	background: white; 
	width: 400px;     
	height: 200px;  
	margin: -100px 0 0 -200px; 
}


Sous IE8 la transparence devrait fonctionner non ? Chez moi ca marche toujours pas Smiley decu
Bonjour, pas de raison que ça ne fonctionne pas avec ces éléments.
Une page en ligne faciliterait le diagnostique Smiley cligne
http://balthy.com/truc/truc.html# Voila ! le background est noir opaque sous IE8 alors qu'il devrait etre gris transparent.

Notez qu'il y a un deuxieme probleme : si la page est longue (height 2000px par ex), le gris (ou noir) remplit juste "un écran", mais si on scroll vers le bas alors que le popup est toujours affiché, on arrive a une zone non grisée. Et si la longueur de la page n'est pas connue a l'avance on ne peut pas mettre un height au DIV noir. Donc c'est un deuxieme probleme auquel je demande votre aide.
La page n'a pas de Doctype et est donc en mode Quirks dans Internet Explorer.
En simplifiant, cela revient à demander à IE 6, 7 ou 8 d'utiliser le rendu d'Internet Explorer 5.5.

Solution: un doctype qui va bien.
En fait j'avais un doctype dans ma vraie page mais dans cette version simplifiée j'ai oublié de le mettre :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Le probleme d'opacité est toujours la ! Et ca ne résoud pas mon autre probleme de hauteur Smiley decu
Modifié par apericube (06 Jan 2010 - 23:41)
Pour le popup qui ne bouge pas

http://www.w3schools.com/Css/pr_class_position.asp
position:fixed;

Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties

De plus, firebug dans firefox est ton ami. Tu peux ainsi faire du "reverse engineering".
Sujet clos
Aller à