z-index e IE

zami

z-index e IE

Ciao a tutti

Sto litigando con la testata di una pagina HTML da realizzare coi CSS.

Su Firefox funziona che è una meraviglia: su IE non mi si fila.

Ci sono tre div: keeper-l, keeper-r, top.

Devono trovarsi tutti e tre alla stessa altezza.
I due keeper staranno uno a destra e uno a sinistra della pagina: voglio che top li copra.

Questo è il CSS:


/* Classe del container destro e sinistro per i filler */
.keeper_l
{
    width:45%;
    float:left;
    height:200px;
    border:2px solid green;
}
.keeper_r
{
    width:45%;
    float:right;
    height:200px;
    border:2px solid yellow;
}
/*Classe del contenitore della testata*/
.top
{
    width:100%;
    position:absolute;
    height:200px;
    border:2px solid red;
    z-index:2;
}

```Questo è quello che vorrei ottenere, preso da firefox dove funziona perfettamente:
http://img844.imageshack.us/img844/2141/divok.png

Come vedete, il DIV col bordo rosso si sovrappone agli altri due: tutti e tre sono sullo stesso livello.


Questo è quello che ottengo in IE7.
http://img685.imageshack.us/img685/8895/divko.png

Qui invece il div col bordo verde sposta quello rosso, nonostante quello rosso abbia uno z-index diverso: quello gallo si comporta sempre correttamente.


Qualcuno sa aiutarmi per piacere? 
:caffe::microsoft1:
 Ci sto sbroccando da due giorni... 

Grazie
Michela

zami

Hahahaha tipico...

Naturalmente ho trovato la soluzione appena postata la domanda...

A chiunque possa interessare, ho modificato il codice del keeper di sinistra così:


.keeper_l
{
    width:45%;
    float:left;
    height:200px;
    border:2px solid green;
   ** position:absolute;
    z-index:-2;**
}

```(Se modifico anche quello di destra, quello di sinistra scompare. :? Mah, misteri della vita)

Insomma funziona.... 
Però se qualcuno se la sente di spiegarmi il perché, mi fa felice.



Per inciso, sapreste spiegarmi anche perché la stessa immagine si vede di un colore in firefox, mozilla, safari & c. e di un altro colore in IE?? o.O
Si può evitare in qualche modo?

Grazie
Michela

lucabartoli

Credo che per risolvere la sovrapposizione sarebbe stato sufficiente assegnare uno z-index anche ai due keeper, oppure alzare lo z-index del top, ad esempio a 10.
Questo perché ie assegna lo z-index automaticamente. Basta che nell'assegnazione automatica ie abbia dato uno z-index al keeper pari a 2 o più ed ecco spiegato il problema.

Il colore dell'immagine credo possa dipendere dal motore di rendering e dal colore in sè, che si trova in uno spazio di colore dove la resa non è garantita. Intanto, l'immagine è salvata in RGB?

zami

Ciao Luca!

Grazie per le spiegazioni.

In effetti il problema si è risolto impostando lo z-index al keeper di sinistra.

Ho provato impostando al solo top lo z-index molto alto o molto basso (+-200) ma il risultato non cambiava: allo stesso modo, se imposto lo z-index (ovviamente diverso) al keeper di destra, quello di sinistra mi scompare!

Uff...
Beh pazienza, per quel che sto facendo funziona... ma mi innervosisce non sapere perché le cose succedono.

Ehm non ho idea se l'immagine sia RGB, è un .PNG.