[Opera 9.10] Gestione proprietà background

[neida]

Ho realizzato un layout con una struttura gerarchica, un div come contenitore, l'intestazione e un div per i contenuti. Poiché ho deciso di utilizzare un'immagine di sfondo per definire il 90% della grafica, quindi relativa sia al div contenitore che al div dei contenuti, ho riscontrato un problema con Opera 9.10 che credo riguardi il ridimensionamento di quest'immagine di sfondo. Non penso di riuscire a spiegare la situazione in maniera adeguata solo con parole, forse qualche immagine che ho preparato vi aiuterà a capire meglio.


L'immagine precedente rappresenta la parte alta del documento in questione, anche se non molto definita come risoluzione si dovrebbero comunque riuscire a vedere i due bordi bianchi ai lati del logo. E' qui che si crea il problema, questi due bordini bianchi in teoria hanno lo stesso spessore, 4 pixel sia a sinistra che a destra. In pratica però, quando visualizzo questa pagina con Opera questi bordi assumono delle diverse misure l'uno dall'altro. Il problema si verifica SOLO quando nella finestra del browser c'è la barra di scorrimento laterale (praticamente sempre). Per rendere l'idea osservate queste altre due immagini a dimensioni reali.

Il bordo bianco del lato sinistro è di 3 pixel mentre dovrebbe essere di 4 pixel


Il bordo del lato destro è di 5 pixel mentre dovrebbe essere di 4 pixel


Come dicevo prima questa anomalia si verifica solo se c'è la barra di scorrimento verticale nella finestra del browser. Se, o per l'apertura a tutto schermo o perchè in assenza di molto testo la pagina termina prima dell'intera lunghezza della finestra del browser, la barra di scorrimento non viene mostrata tutti e due i bordi ritornano con le dimensioni giuste, esattamente 4 pixel da un lato e dall'altro.

Queste sono alcune regole definite nel file css e relative sia all'immagine di sfondo che al logo vero e proprio che utilizzo come background nel div header.

html { margin: 0; padding: 0 }

body {
  margin: 0; padding: 0;
  background: #fff url('../img/bg_page.jpg') no-repeat top;
  text-align: center; color: #333; font: 76% "trebuchet ms", arial, sans-serif
}

#container {
  position: relative; width: 780px;
  margin: 0 auto; text-align: left
}

#header {
  margin: 0 auto; height: 194px;
  background: url('../img/logo.jpg') no-repeat top
}

Anche se forse non è indispensabile, vi riporto giusto lo schema della struttura dei div.

<div id="container">
  <div id="header"></div>
    <div id="content"> ...

Ok, siamo arrivati alla fine e vi chiedo di scusarmi se mi sono dilungato così tanto. Purtroppo non mi era mai capitata una cosa simile e sinceramente non saprei proprio più in quale altro modo modificare il css per ovviare a questo problema. Qualsiasi tipo di suggerimento o consiglio sarà più che gradito. Ciao!

[maxcondor]

ma il sito che ti ha commissionato il sito quanto ti paga?

[neida]

Perché? :master:


(ma cosa c'entra col mio problema poi?)

[maurelio79]

Originariamente inviato da maxcondor
ma il sito che ti ha commissionato il sito quanto ti paga?

Penso fosse un modo per dire "Perchè ti danni tanto per 1px di differenza?"
Comunque, non riesco a capire se i bordi bianchi a cui fai riferimento sono un'immagine, cioè fanno parte dell'immagine di sfondo. Se è così non riesco a spiegarmi come è possibile che si modifichi la larghezza? Forse comparendo la barra laterale viene tagliate parte dell'immagine?
Questo sito è visitabile online? Magari risulta più facile aiutarti..

[neida]

Originariamente inviato da maurelio79
Penso fosse un modo per dire "Perchè ti danni tanto per 1px di differenza?"

Ma non sono i 2 o 3 pixel di differenza fra uno stato e l'altro della pagina, cioè con o senza la barra scorrevole laterale, a farmi preoccupare. Si tratta, piuttosto, di voler capire perchè SOLO con Opera si verifica questa stranezza. Il costo del lavoro non c'entra assolutamente nulla, è solo una questione di "principio", se così si può definire...

Originariamente inviato da maurelio79
Comunque, non riesco a capire se i bordi bianchi a cui fai riferimento sono un'immagine, cioè fanno parte dell'immagine di sfondo.

Sì! fanno parte a tutti gli effetti dell'immagine di sfondo. Questa immagine ha una lunghezza di 1600px in larghezza e circa 150px in altezza. Giusto al centro dell'immagine si trova un box largo 780px, sarebbe quello spazio bianco al centro dell'immagine con l'ombra che sfuma sui lati.

Originariamente inviato da maurelio79
Se è così non riesco a spiegarmi come è possibile che si modifichi la larghezza? Forse comparendo la barra laterale viene tagliate parte dell'immagine?

Hai colto proprio in pieno la questione! E' esattamente quello che accade quando nella finestra di Opera c'è la barra di scorrimento laterale. Al centro di quel box bianco da 780px che ti dicevo prima, come sfondo del div header c'è l'immagine del logo che è larga esattamente 770px. Quindi, avendo posizionato questo logo al centro del div ottengo che al box di 780px bianco, cioè l'immagine di sfondo della pagina, sovrapponendo il logo largo 770px, posizionando al centro del div header, mi restano due bordi bianchi laterali di 5 pixel ciascuno.

Questo è il punto della situazione, questi due bordi bianchi di 5 px compaiono perfettamente con le loro effettive dimensioni sia in FF 2.1,2.3 che con IE6 e 7 mentre con Opera si verifica questo "taglio" se così si può definire, riducendo l'immagine dello sfondo magari per adattarla (cosa che fanno anche gli altri browser che ho citato prima) alla larghezza della finestra quando, appunto, c'è la barra di scorrimento a lato. Stringendosi l'immagine di sfondo ovviamente il box da 780px si rimpicciolisce e il logo da 770px non va ad occupare più la stessa posizione creando quella irregolarità di dimensione fra i due bordi da 5px bianchi ali lati.

Originariamente inviato da maurelio79 Questo sito è visitabile online? Magari risulta più facile aiutarti..

Guarda, purtroppo al momento non ho proprio la possibilità di caricarlo online, anche se solo temporaneamente, sono desolato. So che sarebbe stato tutto molto più facile rispetto alla mia spiegazione ma spero che mi aiuterete a capire come risolvere questa cosa, sempre che sia possibile ovviamente. Ti/Vi ringrazio per l'interesse e spero mi possiate dare qualche indicazione su cosa fare.

[neida]

Ragazzi, lo so, forse vi sembrerà delirante voler sapere una cosa così... ma vi giuro che non sono riuscito a trovare nulla a riguardo. Ma come diamine viene interpretata la proprietà background in Opera? Ho cercato in lungo e largo ma sembra non esistano notizia sulla possibilità di ridimensionare un'immagine di sfondo se c'è o meno la barra di scorrimento laterale... Se avete qualsiasi notizia in merito, ve ne sarei molto grato.