Opacity su IE 6: Solo se si specifica una larghezza?

[ldetomi]

Ciao
Ho bisogno di rendere semitrasparenti alcuni oggetti, sia paragrafi, sia titoli, e ho utilizzato le classiche 3 proprietà per ottenere questo effetto:

filter:alpha(opacity=40);
-moz-opacity:0.4;
opacity:0.4;

Ho però notato che in Explorer 6, l'effetto funziona solo se si specifica una larghezza (anche 100%) per l'oggetto in questione. E' possibile anche usare "float" o "position:absolute" infatti, se si mostrano i bordi dell'oggetto ci si accorge che definendo questi 2 attributi in un certo senso si "forza" il blocco ad avere la stessa larghezza del contenuto e non quella di tutta la finestra.

Tutti gli esempi che ho trovato online ponevano una larghezza, quindi il problema non si poneva, ma da nessuna parte ho trovato conferma di quanto da me riscontrato. Qualcuno può confermare?

Grazie.

[Mich_]

In qualche caso puo` essere vero, ma non per quanto sospetti tu.
Il problema e` che in alcuni casi il <div> che contiene un blocco flottante si riduce a zero, dato che il blocco flottante non "riempie" il blocco che lo contiene, che quindi viene ridotto di dimensioni.

Si ovvia ponendo flottante anche il contenitore, oppure "chiudendo" il float con un blocco (anche piccolissimo) che ha il clear.

Se non riesci a capire (in effetti non e` molto chiaro per uno che non conosce l'argomento), posta il codice HTML e CSS di tutti i blocchi in questione.

[ldetomi]

Ciao,
Conosco bene il problema della "sbordatura" dei DIV float, ma nel mio caso il problema non e' certamente questo dato la trasparenza la impongo direttamente sul div float, non su un suo ipotetico contenitore che verrebbe ridotto a 0.

Comunque, qui di seguito posto 3 situazioni che in firefox sono tutte semi-trasparenti, mentre in IE 6 no. Solo la seconda e la terza vengono rese semitrasparenti per i motivi che ho scritto sopra, la prima invece no, perche' in nessun modo si forza la larghezza dell'oggetto.

<DIV STYLE='background-color:red; filter:alpha(opacity=40); -moz-opacity:0.4; opacity:0.4;'>
 testo di prova
</DIV>





<DIV STYLE='filter:alpha(opacity=40); -moz-opacity:0.4; opacity:0.4;  width:100%; background-color:yellow;'>
  testo di prova
</DIV>





<DIV STYLE='filter:alpha(opacity=40); -moz-opacity:0.4; opacity:0.4; float:left; border:solid 1px red; background:#EFF0ED;'>
  testo di prova
</DIV>

[dvjack]

quoto e/o confermo, IE6 per applicare la trasparenza di background ad un elemento vuole che l'elemento abbia o larghezza o altezza settati...
io ho ovviato aggiungento due regole nella classe dell'oggetto da rendere semitrasparente:

div.semitrasp{
filter:alpha(opacity=40); 
-moz-opacity:0.4;
opacity:0.4;
height: auto !important; //letto da Firefox,Opera, IE7
height: 100%; // letto da IE6,IE5.x
}

in questo modo l'elemento mi diventa trasparente...

[ldetomi]

Ho notato purtroppo un altro inconveniente di cui chiedo conferma a voi:

Sempre in IE una volta che si riesce ad avere un oggetto semitrasparente, con le tecniche sopra esposte, il testo diventa in realtà quasi illeggibile. Io vedo il testo con una specie di ombra sfasata che rende molto confusa la visualizzazione. Il tutto si risolve se si impone un qualsiasi sfondo all'oggetto.

Come dimostrazione confrontate in IE 6 i seguenti blocchi:

<DIV STYLE='filter:alpha(opacity=40); -moz-opacity:0.4; opacity:0.4;  width:100%;'>
  testo di prova
</DIV>

<DIV STYLE='filter:alpha(opacity=40); -moz-opacity:0.4; opacity:0.4;  width:100%; background-color:yellow;'>
  testo di prova
</DIV>

Il secondo si differenzia dal primo solo per la presenza dello sfondo giallo.

Accade anche a voi? E come si può risolvere se non è possibile aggiungere uno sfondo? (Background:transparent; non funziona!)

[dvjack]

usando l'opacità, tutto il contenuto dell'elemento diventa opaco, testo compreso.
una soluzione possibile è inserire un altro div all'interno di quello trasparente, dove lì metti il background: transparent e poi lo devi far uscire dal flusso della pagina, utilizzando il position: absolute/relative.
Un esempio di questo lo puoi vedere qui
In firefox utilizzo una png semitrasparente, ma in Ie utilizzo l'opacità. Utilizzo il position: relative, perchè il div ha una larghezza espressa in percentuale e quindi variabile.

[ldetomi]

Ciao, in realtà a me interessava proprio rendere anche il testo semitrasparente. Concordo ovviamente che la soluzione usata da te sia buona per avere il testo opaco, ma come detto a me servirebbe anche il testo.

Mi confermi per favore se anche a te l'ultimo esempio che ho postato fa quello scherzo sul testo in IE? Per confronto, quello che vedo in Firefox e' proprio quello che voglio.

[dvjack]

scusa, ma avevo capito male, ieri sera ero di fretta....
cmq ora ho capito qual'è il problema, e si presente con IE 6 anche a me, l'unica soluzione che o notato è come dici tu, di mettere un background....
IE non si smentisce mai...

[dvjack]

prova a mettere come background un'immagine gif di 1px x 1px trasparente....
non ho provato xò.....è un'idea che mi è appena venuta..

[ldetomi]

Ci avevo già provato ma figurati se peò esserecosì semplice fregare IE! Bisogna sbattersi molto di più!!!

Come dicevi tu, non si smentisce mai!