Problemi di background con Opera 9

[seed_squall_it]

Ciao a tutti.
Di solito rispondo ai messaggi degli altri, ma stavolta sono proprio in difficoltà. E il problema è..Opera 9!

Ho un'immagine di sfondo di 1 x 50 pixel, formato gif senza trasparenza, applicata al body, posizionata in alto a sinistra e ripetuta orizzontalmente. Il guaio è che Opera 9 non la visualizza ad ogni accesso/aggiornamento alla pagina, ma la fa apparire "a pezzi" quando la pagina viene scrollata verso il basso e poi viene riportata verso l'alto. Premetto che ho provato a dimensionare il body (e anche l'elemento html) con larghezza prima e con altezza e larghezza poi, entrambe del 100%. Ho provato ad impostare esplicitamente una background-position (sia con misure di lunghezza che con parole chiave). A dire il vero, Opera non mi ha mai convinto del tutto come browser perché pur essendo uno dei migliori come supporto agli standard, da quel che ricordo ogni sua versione "cade" sempre su problemi assurdi nell'interpretazione di qualche proprietà CSS. Però ci sono rimasto parecchio male quando ho constatato questo problema. Qualcuno sa illuminarmi? E' effettivamente un problema del rendering di Opera 9? Questo il codice CSS relativo al body:

body {
font-size: 12px;
font-family: Verdana,Arial,Helvetica,Sans-serif;
color: #606060;
text-align: center; /* Centratura orizzontale nel body per IE */
background-color: #fff;
background-image: url(../images/sfondopagina.gif);
background-repeat: repeat-x;
padding: 0 0 9px 0;
margin: 0;
}

Ovviamente la pagina e il CSS risultano validi XHTML 1.0 Strict.

[Mich_]

Mi sa che hai detto tutto, ed hai fatto una diagnosi corretta.
Non hai detto che in altri browser funziona correttamente (ma lo do per scontato).

Potrebbe essere un problema di velocita` di calcolo (del processore principale o di quello sulla scheda grafica), per cui immagino che in altri computer la cosa non si ripeta uguale.
Oppure una interfaccia non gestita correttametne tra il browser e il processore (per cui immagino che la cosa risulti diversa se usi un altro sistema operativo sullo stesso hardware - e un browser con la stessa versione).

[seed_squall_it]

In effetti tutti gli altri browser non hanno problemi, compreso IE 7. Ho fatto altre prove: ho un box posizionato in modo assoluto e un altro box, a destra di esso (che utilizza il margin-left per non far sovrapporre il box assoluto), che contiene una lista i cui elementi sono flottanti a destra. Supponendo che qualcosa potesse dare fastidio a Opera (sarà che sono abituato alle scempiaggini di IE) ho commentato tutto il box della testata che contiene i suddetti box. Il risultato della prova, anche dopo aver dimensionato body e html al 100%, è che Opera 9 fa apparire lo sfondo casualmente (in media una volta su 5-7) quando si aggiorna la pagina e a volte lo fa apparire ripetuto anche verticalmente, ignorando la dichiarazione background-repeat: repeat-x. Non solo: quando mostra lo sfondo ripetuto verticalmente, la "ripetizione" verticale si ferma alla sola area visibile all'interno della finestra del browser e quindi, scorrendo la pagina verso il basso lo fondo ripetuto non appare. Facendola scorrere ancora verso l'alto, le "ripetizioni" verticali dello sfondo spariscono! Ci sono poi altre volte in cui lo sfondo appare ripetuto orizzontalmente nel modo corretto ma...solo a metà! Infatti l'immagine di sfondo inizia da sinistra, in alto, e arriva fin dietro il contenitore generale del sito, ma non compare a destra! Tra l'altro, dato che lo sfondo è posizionato in alto, quando non appare e io posiziono il mouse su un pulsante di Opera per fare apparire l'etichetta di testo con la descrizione del pulsante, tale etichetta appare sopra l'area in cui dovrebbe vedersi l'immagine di sfondo. Appena l'etichetta scompare, il suo posto viene occupato da un "pezzo" dell'immagine! Quindi penso proprio si tratti di un problema di rendering. Potrebbe darsi si tratti effettivamente della combinazione hardware-software, ma è un problema alquanto noioso e stupido, considerando che si verifica su uno dei browser più acclamati per velocità e rispetto degli standard. Le prove sono state tutte effettuate sul mio portatile nuovo: AMD Sempron 3400+, 1 GB di RAM DDR2, GeForce 6100, Windows XP Home Edition SP2. Ovviamente ho già risolto con un box ad hoc (sfruttando il posizionamento relativo del container con z-index: 1) e ci sarebbe anche un altro sistema per risolvere la cosa, ma mi dà parecchio fastidio che Opera 9 sia caduto su una cosa del genere.

[Another-Life]

Originariamente inviato da seed_squall_it
Ciao a tutti.
Di solito rispondo ai messaggi degli altri, ma stavolta sono proprio in difficoltà. E il problema è..Opera 9!

Ho un'immagine di sfondo di 1 x 50 pixel, formato gif senza trasparenza, applicata al body, posizionata in alto a sinistra e ripetuta orizzontalmente. Il guaio è che Opera 9 non la visualizza ad ogni accesso/aggiornamento alla pagina, ma la fa apparire "a pezzi" quando la pagina viene scrollata verso il basso e poi viene riportata verso l'alto. Premetto che ho provato a dimensionare il body (e anche l'elemento html) con larghezza prima e con altezza e larghezza poi, entrambe del 100%. Ho provato ad impostare esplicitamente una background-position (sia con misure di lunghezza che con parole chiave). A dire il vero, Opera non mi ha mai convinto del tutto come browser perché pur essendo uno dei migliori come supporto agli standard, da quel che ricordo ogni sua versione "cade" sempre su problemi assurdi nell'interpretazione di qualche proprietà CSS. Però ci sono rimasto parecchio male quando ho constatato questo problema. Qualcuno sa illuminarmi? E' effettivamente un problema del rendering di Opera 9? Questo il codice CSS relativo al body:

body {
font-size: 12px;
font-family: Verdana,Arial,Helvetica,Sans-serif;
color: #606060;
text-align: center; /* Centratura orizzontale nel body per IE */
background-color: #fff;
background-image: url(../images/sfondopagina.gif);
background-repeat: repeat-x;
padding: 0 0 9px 0;
margin: 0;
}

Ovviamente la pagina e il CSS risultano validi XHTML 1.0 Strict.

Tu vorresti realizzare una texture per il background utilizzando un immagine che ha un altezza di 50 px ripetuta oltretutto solo orizzontalmente??

[seed_squall_it]

Non è che sia proprio una texture (nel senso che non è un'immagine con un disegno particolare che deve essere applicata ripetuta al body)...è solo un'immagine con un gradiente dal blu all'azzurro verticale, che voglio sia posizionata solo nella parte superiore del body, e quindi l'ho fatta larga 1 px e l'ho ripetuta orizzontalmente. E nessun altro browser ha problemi, come in effetti dovrebbe essere...solo Opera 9 sbaglia clamorosamente e nei modi più strani.

[Another-Life]

Ho appena fatto una verifica e l'immagine viene ripetuta orizzontalmente in modo corretto per cui non so da cosa possa dipendere il tuo problema^^

[seed_squall_it]

In effetti anche il sito della mia ditta e quello che sto realizzando per un cliente hanno un'immagine di sfondo ripetuta solo orizzontalmente nel body e Opera 9 non dà problemi. A questo punto, presumo che le cause siano due: o è effettivamente un problema legato alla combinazione hardware-software del PC su cui ho provato (e in ogni caso è seccante) oppure Opera 9 rimane effettivamente "indietro" in presenza di layout abbastanza complessi e con molte immagini di sfondo su vari box. Vabbé, tanto ormai ho risolto con un box ad hoc...che nervi però...se ci si mette anche Opera oltre che IE siamo a posto!

[Another-Life]

Ti va di postare il box ad hoc che hai utilizzato??...semplice curiosità^^

[seed_squall_it]

Certo. A dire il vero la cosa si poteva risolvere un due modi...io ho scelto questo perché ho un box che contiene tutto il sito e quindi non mi andava di "spezzare" la pagina in "testata" (che sarebbe stata larga il 100% del body e avrebbe racchiuso un ulteriore box centrato) e "resto dei box". In pratica, ho il box "sfondo" (un <div> vuoto) subito dopo aver aperto il body e poi il box "container" che contiene tutta la pagina e la centra orizzontalmente nel body. Le regole CSS per questi due box sono:

<body>
<div id="sfondo"></div>
<div id="container">
.....PAGINA...
</div>
</body>

#sfondo {
font-size: 1px; /* Per IE...non si sa mai! */
background-image: url(../images/sfondopagina.gif);
background-repeat: repeat-x;
width: 100%;
height: 50px;
position: absolute;
top: 0;
left: 0;
}

#container {
text-align: left;
width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}

Quindi "container" si sovrappone al box "sfondo", il quale mostra l'immagine di sfondo ripetuta orizzontalmente per tutta la larghezza del body.

[Another-Life]

Come mai non ha ripetuto l'immagine direttamente negli elementi html,body{....}???