Ho una pagina, prevalentemente in PHP ed alquanto complessa, in cui - non potendo utilizzare i classici lightbox e simili, per ragioni che non sto qui a spiegare - per mostrare delle gallery di foto ho fatto ricorso ad un sistema basato fondamentalmente su:
- un livello che copre l'intera area della finestra, con fondo nero ed opacità 70%
- un ulteriore livello, sovrapposto a quello precedente, con la gallery
Funziona tutto benissimo, su FF, su Chrome, su IE 7+...
Naturalmente, IE 6 da problemi (ed il cliente vuole che funzioni anche su quel browser, per quanto obsoleto!).
In cosa non funziona sul 6?
Innanzitutto, l'opacità.
Io la setto così:
Codice PHP:
filter:alpha(opacity=70); moz-opacity: 0.7; opacity: 0.7;
ma IE6 mi restituisce il colore senza alcuna trasparenza.
Secondo problema: il livello nero-trasparente dovrebbe coprire tutta la finestra, ma su IE6 invece mi copre soltanto l'area corrispondente ad un livello sottostante, che è più stretto della finestra.
Questo livello (wrapper) ha il seguente CSS:
Codice PHP:
#wrapper {
position: absolute;
width:962px;
max-width:962px;
overflow:hidden;
padding:36px 0 0px 0px;
background-image:url(images/bg.jpg);
background-position:left top;
background-repeat:no-repeat;
background-color:#6B7887;
left: 50%;
margin: 36px 0 0 -481px;
background-attachment: scroll;
}
Ovviamente, il livello nero non è posizionato dentro il livello wrapper, ma fuori (a fine pagina, nel codice).
Terzo problema: il livello contenente la gallery, anche se ha lo z-index più alto, quando viene a trovarsi sopra una select, mi fa vedere questa come se fosse invece in primo piano, davanti a tutto (livello e foto).
Dalla immagine allegata si vedono bene tutti e tre i problemi: mancata opacità, dimensione limitata, sovrapposizione delle select.
Se può servire, questi sono i settings CSS generali (per IE):
Codice PHP:
* {
margin:0px;
padding:0px;
}
body {
margin:0 auto;
padding:0 1px;
background-color:#6B7887;
}
html > body {
min-height:100%;
height:auto;
}
Come posso risolvere questi problemi?