opacità su explorer

**WebMinus** · 30-06-2011, 17:49

Ciao a tutti.

Ho creato una pagina che utilizza l'opacity. Su Firefox, Safari e Chrome tutto ok, ma per explorer devo usare un css differente. Posso inserire nello stesso foglio i valori di opacity e di filter: alpha? Perchè ci ho provato e non funziona. Il sito è www.melameno.me , subito in home page. Se lo si apre in firefox è tutto ok, ma in explorer ciccia.

Il CSS è così:

codice:

#info { position: absolute;
				margin-left: 900px;
				margin-top: 0px;
				z.index: 1;}
	#sfondo { position: absolute;
			  margin-left: 170px;
			  margin-top: 69px;
			  z-index: 2;}
	#foglie { position: absolute;
			  z-index: 5;}
	#foglie a:hover { opacity: 0.0;
					  filter:alpha(opacity=0);
					  filter:"alpha(opacity=0)";
					  -moz-opacity: 0.0;}
	#topsx { position: absolute;
			  margin-left: 156px;
			  margin-top: 62px;}
	#topdx { position: absolute;
			  margin-left: 432px;
			  margin-top: 61px;}
	#downsx { position: absolute;
			  margin-left: 156px;
			  margin-top: 314px;}
	#downdx { position: absolute;
			  margin-left: 427px;
			  margin-top: 339px;}
	#centro { position: absolute;
			  margin-left: 336px;
			  margin-top: 234px;
			  z-index: 6;}
	#progetti { position: absolute;
				margin-left: 350px;
			    margin-top: 248px;
			    opacity: 0.0;
			    filter:alpha(opacity=0);
				filter:"alpha(opacity=0)";
				-moz-opacity: 0.0;
			    z-index: 7;}
	#progetti:hover { opacity: 1.0;
					  filter:alpha(opacity=100);
					  filter:"alpha(opacity=100)";
					  -moz-opacity: 1.0}
	#menu { position: absolute;
			  margin-left: 650px;
			  margin-top: 170px;
			  z-index: 3;}

**Prill** · 30-06-2011, 18:21

Perché inserisci due volte il filter alpha? Con istruzioni diverse per ie8 e ie7/ie6 potresti avere

codice:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);

l'opacità non viene però applicata da explorer a elementi in linea, ad evitare problemi si può aggiungere quindi un'ulteriore istruzione che è

codice:

zoom:1;

sarebbe preferibile che le istruzioni per explorer stessero in un css a parte da richiamare solo per le versioni di ie dalla 8 in giù (così eviti di far caricare ai browser diversi istruzioni inutili e puoi anche validare il css primario)

**WebMinus** · 30-06-2011, 19:28

Ricapitolando, la prima parte di codice dovrei metterla al posto della dichiarazione di IE8, mentre la seconda non la conosco, a cosa serve? E' già CSS3? La prima parte invece è Js, vero?

**WebMinus** · 30-06-2011, 21:38

PS: per provare ho eliminato l'istruzione per IE8, e ho tenuto solamente filter:alpha(opacity=0);

Ma niente, non mi legge proprio le immagini su IE.

**Prill** · 01-07-2011, 16:30

Nella pagina di esempio approntata per altro problema, trovi il codice necessario, che poi era quello indicato nella prima risposta. Prova e dicci

**Prill** · 01-07-2011, 16:38

Questo il codice rivisto e semplificato (solo relativamente al div con le foglie, per gli altri sarebbero da evitare i posizionamenti assoluti e se devi avere div affiancati ricorrere ai float)

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>melameno.me - cercasi webmaster </title>

<style type="text/css">
<!--

#sfondo { 
	position: relative;
	width:474px;
	height:474px;
	background:url(img/home/foglie2.png) no-repeat;
}
#sfondo img { 
	vertical-align:bottom;
	border:0;
}
a#topsx, a#topdx, a#downsx, a#downdx { 
	position: absolute;
	display:block;
	width:237px;
	height:237px;
	opacity:1;
}
a#topsx:hover, a#topdx:hover, a#downsx:hover, a#downdx:hover { 
	opacity:0;
}
a#topsx {
	top: 0;
	left: 0;
}
a#topdx {
	top: 0;
	right: 0;
}
a#downsx {
	bottom: 0;
	left: 0;
}
a#downdx {
	bottom: 0;
	right: 0;
}
a#centro { 
	position: absolute;
	display:block;
	width:144px;
	height:144px;
	top: 164px;
	left: 165px;
	z-index: 6;
	background:url(img/home/centro2.png) no-repeat;
	opacity:1;
}
a#centro img { 
	padding-top:14px;
	padding-left:13px;
	opacity:0;
}
a#centro:hover img { 
	opacity:1;
}
-->
</style>

<!--[if lte IE 8]>
<style type="text/css">
* {zoom:1}
a#topsx:hover, a#topdx:hover, a#downsx:hover, a#downdx:hover { 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
a#topsx:hover, a#topdx:hover, a#downsx:hover, a#downdx:hover { 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
a#centro img{ 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
a#centro:hover img{ 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
</style>
<![endif]-->
</head>
<body>
           	
    <div id="sfondo">
 
        [img]img/home/1.jpg[/img]
        [img]img/home/2.jpg[/img]
        [img]img/home/3.jpg[/img]
        [img]img/home/4.jpg[/img]
        [img]img/home/progetti2.png[/img] 

     </div>

</body>

</html>

edit

osps, dovevo postarlo nell'altra discussione, vabbè, è uguale

Discussione: opacità su explorer

Strumenti discussione

Ricerca discussione

Visualizza

opacità su explorer

Permessi di invio