Opera: problema con l'opacità

**giova95** · 06-07-2012, 17:16

Ciao a tutti, come scritto nel titolo ho un problema con l'opacità che si verifica solamente su Opera mentre su Chrome Firefox e perfino Explorer non si presenta.

Il problema è il seguente:
In un blocco con sfondo bianco c'è un'immagine con sfondo bianco. Tramite css è impostata la trasparenza sul blocco.
Su tutti i browser tranne che opera non ci sono problemi e non si nota dove "inizia" l'immagine... mentre con opera l'effetto trasparente si nota sia sul blocco che sull'immagine, ma si vede anche lo sfondo bianco ed è un effetto parecchio antiestetico.
Ho provato a impostare la trasparenza anche sull'immagine ma la situazione non cambia.

Risolverei abbastanza in fretta utilizzando un immagine .png con sfondo trasparente ma oltre al fatto che questa sarebbe più pesante mi interessa anche sapere l'origine del problema e quale potrebbe essere la possibile soluzione.

Purtroppo non so dirvi nient'altro perchè dopo quasi mezz'ora che provo e riprovo non ho capito quale sia l'origine del problema, posso linkarvi la pagina?

(il problema ovviamente non si presenta se su opera si utilizzano temi personalizzati)

Grazie in anticipo

**Prill** · 07-07-2012, 15:30

Ciao, linca pure la pagina

**giova95** · 07-07-2012, 16:07

Grazie

La pagina è questa
Si si lo so... è forumfree... ma sto cercando di fare del mio meglio per farlo sembrare un sito serio (e credo di aver già fatto tanto).
Basta fare un giro tra gli altri siti forumfree per capire cosa intendo dire

**Prill** · 07-07-2012, 19:17

Il codice non è proprio pulito né molto leggibile, troppi tag annidati e alcuni non chiusi. Il div o la riga o la cella o la tabella dovrebbe avere su una opacity attiva che agisca tanto sullo sfondo bianco che sulle immagini, può darsi che non sia applicata da Opera perché mancano chiusure di celle e di righe. Per trovare l'errore dovresti passare al validatore e correggere il tutto, un codice scritto correttamente funziona anche con Opera, per esempio:

codice:

...

.web {
font-size: 11px;
opacity:0.9;
background:#fff
}

.bottonerosso {
width:50px;
height:50px;
padding:25px 15px 0 0
}
.utenti {
width:100px;
 height:100px;
}
.web a img {filter:alpha(opacity=30); opacity: 0.5;
-webkit-transition:opacity 0.5s ease; /* Chrome e Safari */
-moz-transition:opacity 0.5s ease; /* Firefox */
-o-transition:opacity 0.5s ease; /* Opera */
transition: opacity 0.5s ease}
.web a:hover img {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0}
</style>
</head>

<body>
<div class="web">[img]bottonerosso.jpg[/img]
[img]utenti.jpg[/img]
</div>

</body>
</html>

Ti converrebbe semplificare riducendo il più possibile il numero di celle e di tabelle

**giova95** · 07-07-2012, 21:11

purtroppo sul codice HTML non posso agire... come già detto forumfree fa casini.
Per chi non lo sapesse forumfree è una piattaforma per forum che possono usare tutti in quanto non implica la conoscenza di nessun codice.
Per gli utenti un pò più esperti c'è la possibilità di modificare gli stili CSS, le immagini e alcune altre cose, ma la struttura del forum è gestita direttamente dal server.
Per quanto sono riuscito a capirne è tutto "gestito" da un unica pagina in php. In pratica non esistono le "pagine".
Esiste un file php e il database. In base ai parametri passati il file php genera il codice HTML esatto per quella pagina.
Indubbiamente un modo esemplare di gestire lo spazio a disposizione sul server, ma crea parecchi problemi.

Davvero dici che potrebbe essere un problema di codice HTML? (io il codice l'ho validato con il validatore del w3c e a parte alcuni errori dovuti al javascript di youtube non mi pare ce ne siano altri)
Io ho provato con gli strumenti per webmaster di opera e sembra a posto, ho provato a modificare il codice HTML, a modificare i CSS direttamente dagli strumenti ma la situazione non cambia, sembra un'oggetto a sè stante, quando invece se controlli dal codice è perfettamente inserito nel div .mainbg (nel quale è impostata l'opacità)
Per gli strumenti di opera ctrl + shift + i

Purtroppo non ho idea di come risolvere, credo che l'unico modo sia usare immagini trasparenti anche se pesano circa 3 volte di più

**Prill** · 07-07-2012, 22:42

codice:

...
<td class="mainbg" valign="top"><form action="/" method="POST" autocomplete="off"><input type="hidden" name="act" value="Login"><input type="hidden" name="CODE" value="01"><table style="text-align:center;width:100%" cellpadding="4" cellspacing="1"><tr><td class="ww" height="35"> Email o Nick: <td class="ww" style="text-align:left"><input type="text" size="16" maxlength="64" name="UserName" tabindex="8" class="forminput"> <tr><td class="ww" height="35">Password:<td class="ww" style="text-align:left"><input type="password" size="16" maxlength="32" name="PassWord" tabindex="9" class="forminput"><tr><td class="ww" colspan="2" height="30" nowrap>
<label for="CookieDate">Ricordami</label><input type="checkbox" name="CookieDate" id="CookieDate" value="1" tabindex="10" checked>   Recupera password

<div style="text-align:center;margin:7px"><input type="submit" value="Login" tabindex="12" class="forminput"></div></table></form>
<td class="mright" rowspan="2">
<tr><td id="simbols" class="nascosta" style="border-top:0" colspan="2"><div class="aa"><table><tr><td><input type="button"

mancano chiusure di td e tr, ho evidenziato solo alcuni errori. Sì, il problema è nel codice, dove però non posso dirtelo perché non si può guardare

**giova95** · 08-07-2012, 14:44

uh... bene... .-.
Grazie per la pazienza

Discussione: Opera: problema con l'opacità

Strumenti discussione

Ricerca discussione

Visualizza

Opera: problema con l'opacità

Permessi di invio