Posizionamenti assoluti e immagini

[keratox]

Sto facendo un simpatico layout di prova sistemando delle immagini con i posizionamenti assoluti.

Il fatto è che su Firefox le immagini si dispongono, ma su IE le immagini si susseguono senza posizionarsi.

xhtml

<div id="cont">
  [img]bordosinistro.gif[/img]
</div>

css

#cont > #bordoleft{
  position:absolute;
  top:0;
  left:0;
}

Su IE non c'è proprio niente da fare?

Anche in Opera si vede bene, però min-height non va

[seed_squall_it]

#cont > #bordoleft

Questo è l'errore! IE non supporta il selettore figlio e il selettore fratello (> e +), quindi non interpreterà mai un selettore CSS di quel tipo. Per risolvere, ti basta usare il selettore discendente che viene interpretato senza problemi.

#cont #bordoleft {
...
}

In Opera non va min-height? Strano...puoi postare il codice?

[keratox]

#abc{
min-height:80%;
}

<div id="abc">

Comunque ora tutto ok, non sapevo che IE non interpretasse quei selettori.

Comunuque, quando inserisci le immagini con i posizionamenti assoluti, in IE si vede dietro, lo sfondo... e per recuperare a questo problema, specifico es: right:-1, però su firefox si nota quel pixel di eccedenza.
Non c'è modo di sistemare sia in FF che IE.

[seed_squall_it]

E quando mai IE interpreta qualcosa che serve come si deve?

Cmq, io non mai sperimentato il problema che hai con le immagini in prima persona, perché seguendo le norme per l'accessibilità utilizzo i background, in modo che se l'immagine di background non viene caricata, ho cmq un testo esplicativo che normalmente è "nascosto" dietro il background. Per fare questo uso la tecnica di image replacement nota come Pixy Cover-Up Span (che sfrutta un tag <span> aggiuntivo e il posizionamento assoluto). Nel tuo caso, potrebbe darsi che IE interpreti male (non c'è da stupirsi...) l'immagine che è un elemento rimpiazzato. Hai provato a impostare i margini e il padding dell'immagine a 0? Perché nella sua immensa indecenza, IE li applica alle immagini anche se non sono elementi a livello di blocco. Al limite, puoi "forzare" la trasformazione in elemento a livello di blocco esplicitamente con display: block. Oppure prova a vedere che succede impostando display: inline per l'elemento <img /> (vado a tentativi, non ho proprio tempo di provare ora).

Per la min-height è davvero strano che Opera non la interpreti...specie se la interpreta Firefox. Al limite, prova a usare il solito hack per IE...vediamo se ad Opera piace:

#abc {
min-height: 80%;
height: auto !important;
height: 80%;
}

Ovviamente, quell'80% è riferito a un box con altezza specificata, giusto?

[keratox]

Si'.

Ok. Farò qualche prova.

Grazie, ciao!