Comportamento anomalo CSS filter:alpha

[platone]

Ciao a tutto il forum.

E' un po' che non disegnavo layout, dal momento che per molto tempo mi sono dedicato esclusivamente alla programmazione PHP.

Dopo molto tempo sono tornato ai layout e ho visto che sono state introdotte un sacco di chicche.

Con mia enorme gioia è stata introdotta la trasparenza anche su mozilla (stavo per svenire).
Insomma torno ed è tutto cambiato: la gente ha smesso di usare le tabelle, utilizzare linguaggi serverside e Javascript insieme è diventato uno standard AJAX (la gente lo faceva già da diversi anni, ma chi ci credeva che gli avrebbero pure dato un nome ed una serie di classi dedicate?)..... insomma.... sono invecchiato e ormai mi trovo a dover essere io a chiedere una mano sul forum!

Veniamo al dunque:

ho notato che IE non attribuisce correttamente il filter:alpha ad un layer annidato a tre livelli di profondità mentre la stessa proprietà attribuita ad un layer annidato fino a due livelli non soffre dello stesso problema. E' normale (cioè, già qualcuno si era accorto di questo comportamento), oppure puzza di errore?

Vi posto un esempio del mio codice:

<div id="riferimento">

//qui ho altri layer che prendono bene la proprietà filter:alpha

<div id="menu_payoff">
<div id="payoff_sfondo">
<table> (etc..)</table>
</div>
</div>

</div>

Vi posto anche i rispettivi CSS creati:

#riferimento {
	height: 290px;
	width: 774px;
	position: relative;
	text-align: left;
}
#menu_payoff {
	position:absolute;
	z-index: 2;
	right: 32px;
	bottom: 20px;
}
#payoff_sfondo {
	z-index: 1;
	position:absolute;
	width: 100%;
	-moz-opacity: 0.85; /* per mozilla */
	opacity: 0.85; /* FF e CSS3 */
	filter:alpha(opacity=85)
}

Su mozilla nessun problema....
:berto:

Grazie in anticipo per la consulenza :-P

[Mich_]

Puzza ...
Soprattutto puzza l'inserimento di blocchi assoluti in blocchi relativi. Cosa vuoi ottenere?

Vedi anche questi articoli: I posizionamenti assoluti e Capire i posizionamenti relativi

[platone]

Il primo blocco relativo mi serve per posizionare una serie di LAYER, quindi per fare il riferimento TOP:0, LEFT:0, rispetto a tutti i successivi Layer.

Il secondo blocco è un contenitore di una scritta e un layer che fa da sfondo (facendo da sfondo ho bisogno di settargli lo z-index più in basso) ed è quello che ha la trasparenza.
Lo sfondo in questo caso ha lo z-index, la posizione assoluta perchè deve stare sotto al layer principale e la dimensione width = 100% e heigh = 100% rispetto al layer assoluto in cui è contenuto (cioè fa da sfondo).

Mi sono perso qualche cosa?

[Mich_]

Sono io che non riesco a seguirti.

Per quanto ne so il 95% dei layout si possono realizzare senza posizionamenti.
I posizionamenti rendono la vita molto piu` complessa (anche in particolare per il cross-browsing).

In particolare cosa intendi per layer? Ormai non se ne sente piu` parlare: anche Netscape li ha abbandonati.

Gli sfondi sono gia` dietro al resto del contenuto: non vedo la necessita` di inserire un blocco apposito. La semitrasparenza si puo` rendere anche con strumenti grafici (cioe` inserisci una immagine - gif o png - con gia` la semitrasparenza), e funziaonno senza problemi in tutti i browser.

[platone]

La semitrasparenza una GIF non la prende.
La semitrasparenza di una PNG (che deve essere a 32 bit con canale alpha aggiuntivo) viene vista solo da firefox.

Non c'è modo di utilizzare pertanto una immagine semitrasparente, l'unico modo è utilizzare un layer.

[Mich_]

Non me ne intendo molto di grafica, ma leggo cio` che viene proposto in questo forum.

I GIF possono simulare la semitrasparenza, anche se non ha un effetto bellissimo (resta a puntini).

I PNG possono essere visualizzati anche da IE, con un filtro opportuno. Con una ricerca nel forum (bottone in alto) trovi anche la sintassi corretta e come applicarlo agli sfondi.

Invece la semitrasparenza da CSS non e` prevista dallo standard in vigore: e` una estensione che hanno solo alcuni browser: IE, Moz, FF e ultimamente anche uno dei browser per mac (solo l'ultima versione).

[platone]

Mi sa che non sai di cosa stai parlando.

Il filtro di cui parli per IE da applicare alle PNG per la trasparenza è lo stesso di cui sto parlando io dall'inizio e può essere applicato a GIF, PNG, LAYER, etc.

Inoltre a cosa serve uno standard?
Lo standard serve ad uniformizzare il comportamento dei browser. Se lo standard raggiunge tale obiettivo perfetto, se non lo raggiunge vale meno di zero.

Mozilla, Opera, Firefox, IE utilizzano comandi diversi, non standard che funzionano correttamente. Quindi l'effetto finale ottenuto è CROSSBROWSER (tanto quanto uno standard).

Che sia standard o meno questo è proprio l'ultimo dei problemi.

Lo sfondo che ho applicato non è una gif, non è una PNG ma è una struttura complessa di tabelle e immagini in quando deve autoridimensionarsi a seconda del contenuto (esattamente come il contenuto), quindi non può essere effettuata come dici tu.

Per quanto riguarda invece il supporto canali alle trasparenze resta il discorso che ti ho fatto prima: GIF (monocanale), PNG (solo firefox e mozilla e IE7). Questo significa tagliare fuori tutti i browser IE inferiori alla versione 7 (cioè il 70% del web).

Insomma: utilizzare lo standard significa non essere compatibli con il 70% del web.
Ritengo che bisogna usare comandi e pratiche crossbrowser e non "standard per forza".

L'unico neo è che il comportamento di IE con questo layer è al quanto bizzarro e non capisco perchè!

[platone]

ASSURDO!!!!


Ho trovato, ho provato a modificare parametro per parametro il CSS fino a farlo diventare uguale a quello di un altro layer su cui la trasparenza funziona e ho scoperto il seguente FATTO:


IE ha un errore nella gestione delle trasparenze quando il contenuto del layer si autoridimensiona con le % e non con pixel. Tolto l'atributo width=100% sia dal CSS che dalla tabella HTML il layer è diventato trasparente come chiedevo.

L'atributo width se NON impostato in pixel blocca il filtro alpha. ASSURDO! I programmatori di IE dovrebbero andare a fare un corso da quelli di mozilla.

Queste sono le classiche cose che ti costringono a ripiegare su alternative "scomode".


Se qualcuno desidera può inserire questa discussione nella lista dei BUG di IE per i CSS.
Sempre se li state tracciando!

[Salvy95]

GRANDE PLATONEEEEEEEEEE PASSIAMO TUTTI A MOZZILLA!!!