Trasparenza iframe (facebook)

patrizia.lorenzini

Trasparenza iframe (facebook)

Ciao a tutti,
ho inserito il pulsante "mi piace" su un sito che ho realizzato.
Sto utilizzando l'html 5.. quando vado a passare la validazione w3c mi dice che il parametro allowtransparency=?true? assegnato all'iframe è obsoleto.
L'ho tolto e cosa succede?
Succede che funziona su tutti i browser tranne internet explorer che disegna un brutto sfondo bianco intorno al "mi piace".
Come posso risolvere?
Nel foglio di stile c'è qualche proprietà da inserire per l'iframe?
Grazie 1000

vnotarfrancesco

Con IE abbiamo tutti quanti dei problemi. Comunque, non conosco lo snippets di codice di Fb ma questo dovrebbe funzionare per tutte le esigenze di sfondi trasparenti.
Creati una classe e assegnale queste proprietà nel foglio di stile:

.tuaclasse {
background: rgb(0, 0, 0);
background: rgba(0,0,0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
color:white; font-weight:bold; text-align:center;
}
Per modificare il valore della trasparenza modifica quel 50 (0.5 per gli altri browser), con 0 sarà tutto trasparente, con 100 tutto pieno.
E' importante l'ordine con cui sono scritte le regole, devono proprio essere inserite in quel modo.

Valerio Notarfrancesco

patrizia.lorenzini

Ho provato a fare quello che mi indichi ma il risultato non è quello sperato.
Su explorer mi diventa trasparente l'oggetto, sugli altri browser l'oggetto resta visibile ma lo sfondo non è trasparente.
Sicuramente sbaglio qualcosa

La mia pagina si trova qua .villahedy.it / new /
Sto ricostruendo il sito.

Grazie 1000

vnotarfrancesco

img203.imageshack.us/i/akane.png

Tu dici questo pulsante? Lo vedo trasparente, ma sicuramente avrò capito male io.

Valerio Notarfrancesco

patrizia.lorenzini

Hai capito benissimo invece... ti faccio vedere come lo vedo io invece » img839.imageshack.us/i/hedy.jpg
Come lo vedi te andrebbe benissimo.

La versione di explorer che ho installata è la 8.

vnotarfrancesco

Avevo capito male, avevo capito che con IE andava bene e con gli altri browser ci fossero dei problemi.
Il problema è solo di IE quindi; vediamo, quando inserisci l'iframe di Fb non vedo l'associazione ad una classe ma solo un inline style.
Dove hai definito la trasparenza?

Valerio Notarfrancesco

patrizia.lorenzini

Avevo provato a definire la classe ed associarla prima al tag iframe poi al div.. quando ho visto che non dava il risultato sperato l'ho tolta... pardon

vnotarfrancesco

Sto cercando nel tuo file layout.css ma non trovo dove hai impostato la trasparenza.
Vedo solo questo:

div#like-facebook {
position: relative;
margin-top: 80px;
width: 130px;
height: 25px;
float: right;

Valerio Notarfrancesco

prill

Nel foglio di stile c'è qualche proprietà da inserire per l'iframe?

no, non vi sono proprietà che permettano di ottenere lo stesso effetto dell'attributo allowtransparency.

Per ovviare al problema della validazione si può nasconderlo:

attraverso javascript, ecco un esempio da inserire in head

<!--[if IE]>
<script type="text/javascript">
document.getElementById('IdAttribuitoAllIframe').allowTransparency = true;
</script>
<![endif]-->

usiamo i commenti condizionali per lo script così che solo Explorer lo carichi (da modificare la parte evidenziata) ;

usiamo i commenti condizionali e due richiami per l'iframe, il primo non sarà reso da Explorer che lo considererà un commento, mentre il secondo, con l'attributo incriminato, non sarà visto dagli altri browser e dal validatore


<!--[if !IE]> <!-->
<iframe src="..." width="..." height="..."></iframe>
<!--<![endif]-->

<!--[if IE]>
<iframe src="..." width="..." height="..." allowtransparency="yes"></iframe>
<![endif]-->

patrizia.lorenzini

Ho provato la soluzione 2 di Prill, in questo modo funziona correttamente su IE e passa la validazione. Grazie 1000