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.

codice:
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.

codice:
<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!