Ciao a tutti! Ho un problema con le png su una pagina. Dovrei rendere delle png trasparenti su explorer, ma queste sono contenute in un iframe. Dovrebbe essere quindi trasparente anche quest'ultimo. Per fare queste cose vorrei ricorrere al filtro per explorer, perchè vorrei realizzare il sito esclusivamente in HTML e CSS, senza ricorsi a js o altro.
Il risultato che vorrei è più facile vederlo che spiegarvelo: se aprite questo link:
http://www.melameno.me/html/storico/storico.html
con un qualsiasi browser che non sia explorer vedrete il risultato che voglio anche per questo maledetto IE.
Ho provato così:
codice pagina principale:
Codice CSS:codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>melameno.me - storico: com'e' cresciuto il mio piccino. </title> <meta name="description" content="voglia di web master - un webmaster come tutor" /> <meta name="author" content="Alessandro Petitti" /> <meta name="keywords" content=" melameno, melameno.me, storico sito, webmaster, sviluppo web, grafica, photoshop, illustrator, indesign, seo, comunicazione integrata, web developement, web culture, cultura web, suggerimenti web, tutor webmaster" /> <link rel="stylesheet" type="text/css" href="../../css/generale.css"> <link rel="stylesheet" type="text/css" href="../../css/storico.css"> <link rel="shortcut icon" href="favicon.ico"> </head> <body> <div id="main"> <div id="casapagina"> [img]../../img/casapagina.jpg[/img] </div> <div id="imac"> [img]imac.png[/img] <map name="date"> <area shape="rect" coords="16, 10, 125, 38" href="13-05-11/frames/tastiera.html" target="tastiera"> <area shape="rect" coords="16, 50, 130, 78" href="24-06-11/frames/tastiera.html" target="tastiera"> </map> </div> <div id="schermi"> <div id="tastiera"> <iframe name="tastiera" target="schermo" src="13-05-11/frames/tastiera.html"> </iframe> </div> <div id="screenshot"> <iframe name="schermo" src="13-05-11/frames/1.html"> </iframe> </div> </div> </div> </body> </html>
E infine codice di un iframe con CSS inline (il primo, ma la faccenda è identica per tutti)codice:#imac { position: absolute; z-index:2; width:1100px; left:0px; top:80px;} #tastiera { position:absolute; z-index:4; left:0px; top:315px;} #tastiera iframe { width:440px; height:130px;} #screenshot iframe {width:880px; height:420px;} #schermi { position:absolute; left:197px; top:90px; z-index:3;}
Non so bene dove sbaglio, ma una cosa è certa: Sbaglio.codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>melameno.me - storico: com'e' cresciuto il mio piccino. </title> <meta name="description" content="voglia di web master - un webmaster come tutor" /> <meta name="author" content="Alessandro Petitti" /> <meta name="keywords" content=" melameno, melameno.me, storico sito, webmaster, sviluppo web, grafica, photoshop, illustrator, indesign, seo, comunicazione integrata, web developement, web culture, cultura web, suggerimenti web, tutor webmaster" /> <!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="../../css/storicoie.css"> <style type="text/css"> div#immagine {display:block; width:800px; height:400px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/1.png')} div#immagine img{width:800px; height:400px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); } </style> <![endif]--> <style type="text/css"> img {border:0;} </style> </head> <body> <div id="immagine"> [img]../img/1.png[/img] </div> </body> </html>
Rispondi quotando
