IE6 e Due DIV annidati con OVERFLOW

[cleverboy]

Salve

ho realizzato una paginetta con PHP che consente di visualizzare i dettagli di una news (cliccando sul titolo appare il testo... niente di che!) con effetto lightbox.

Chi non sapesse cosa è il lightbox vada qui... è la mia pagina di prova
sulpmsiena.altervista.org/proveNEWS/esempio.htm

Il problema è che, sebbene con IE7 e Mozilla funzioni (a parte un paio di correzioni che devo ancora fare...), su IE6 le barre di scorrimento non funzionano... appaiono (anche quella orizzontale che non dovrebbe) e non scorrono un bel niente!!

Ecco in due parole come è composta la pagina (viene fuori da un javascript... ve la riassumo)

<div id="overlay">
  <div id="Box">
    [img]close.gif[/img]
    <div id="newsBox">
        Bla bla bla
    </div>
  </div>
</div>

ed ecco il CSS che la modella...

div#overlay {
  position: absolute;
  top:0;
  left:0;
  zIndex = 90;
  width:  w; /* valore inserito con javascript */
  height: h; /* valore inserito con javascript */
}

div#Box {
  zIndex: 95;
  background: #fff;
  overflow: auto;
  position:relative;
  top:50px;
  left:50px;
  width: w -100 +'px';  /* javascript */
  height: h -100 +'px';  /* javascript */
}

div#newsBox {
  zIndex: 100;
  position: relative;
  top: 20px;
  width: w -130 +'px';
  background: #fff;
}

Se provate ad aprire la pagina con IE6 vedrete che non è una bella cosa!

Inutile dire che c'è qualcosa di sbagliato... probabilmente nell'overload assieme alla position:relative... non saprei come risolvere!!

Forse se elimino il div BOX (che tanto mi serve solo da contenitore...)

Che mi dite?

[Myaku]

occhio ... "zIndex" non esiste

hai verificato che non ci sia qualche problema nello script? (ad esempio, oggetti o proprietà non supportati da IE, errori nel codice ...)

[cleverboy]

zIndex esiste... solo che nel css va scritto come z-index (io ho postato copiando dal js... tutto qua!).

Errori nel codice... boh! direi di no, perché di fatto funziona sia su IE7 che su Mozilla... per cui il codice dovrebbe essere OK.

Mi chiedo se non sia infastidito dall'annidamento dei due div e non riesca pertanto a gestire l'overflow correttamente!

[Myaku]

Originariamente inviato da cleverboy
zIndex esiste... solo che nel css va scritto come z-index

era a quello che mi riferivo

[Mich_]

Anzitutto evita di postare il codice da elaborare: posta sempre il codice come arriva al browser, altrimenti non si puo` verificare se ci sono errori nel trasferimento dei file (questo vale per il forum CSS e altri forum "lato client").

In alcuni browser esistono gli attributi (che non fanno parte dello standard CSS2):
overflow-x
overflow-y

Se non ti interessa la validazione, potresti inserire:
overflow: auto;
overflow-x: auto;
overflow-y: hidden; /* o viceversa */
Eventualmetne (se serve) puoi aggiungere !important all'overflow, in modo che gli altri vengano ignorati dai browser piu` recenti.

[cleverboy]

Indubiamente hai ragione in merito al codice... ma considera che quel pezzo di pseudo-css che ho postato (immagino tu ti riferisca all'errore sullo z-Index) non è in alcun modo reperibile nella pagina, poiché creato estemporaneamente dal javascript!

Ad ogni modo... a me la validazione interessa, essendo io stesso il responsabile dell'accessibilità di alcuni siti internet per lavoro (ci farei una figuraccia! ), però credo che il vero problema sia nella compatibilità cross-browser, visto che funziona dappertutto tranne che su IE6!

Per il momento ho risolto con una soluzione alternativa (evitando gli annidamenti di DIV) ma credo che addirittura possa decidere per una soluzione del tutto diversa, poiché mi dà delle grane con l'apertura degli allegati e la cosa non mi soddisfa.

Ciao

[Mich_]

Un JS che modifica il CSS al volo non mi pare una buona soluzione. Mi sembra decisamente una cosa "sporca".

Dal mio punto di vista vedrei meglio un JS che attribuisce classi diverse ad un elemento.
Cioe` esistono due classi CSS ben chiare e fisse; tramite JS puoi attribuire una classe o l'altra allo stesso elemento:
document.getElementById('OGGETTO').className = "miaclasse";

Tra l'altro in questo modo eviti altri problemi, acceleri gli eventi e scarichi il client.


Se devi assegnare un attributo solo per il brwoser IE6, hai sempre a disposizione i "commenti condizionali" (vedi tra i "link utili" se non sai cosa sono).
Ma se hai il problema dell'accessibilita`, JS e` molto piu` pericoloso dei CSS e della validazione CSS.

[cleverboy]

per ora sono solo prove... poi farò un file CSS con tutte le classi del caso.
per quanto riguarda l'accessibilità non penso che ci siano problemi con il js... a meno che non si voglia discutere di cosa sia accessibile e cosa no. Non tutto ciò che il validatore W3C reputa accessibile lo è... e non è vero nemmeno l'opposto! ma sarebbe una discussione lunga...

Cmq prima o poi riuscirò a trovare una soluzione buona su tutti i fronti!

[Mich_]

Il problema del JS e` che le pagine devono funzionare (cioe` non perdere funzionalita`) anche se i JS sono disabiiltati.
Quindi niente JS nei menu e nel layout (a meno che non servano esclusivamente per modifiche "cosmetiche") e se li usi nei form, devi duplicarne la funzionalita` anche lato server.

[cleverboy]

Non ho capito l'ultima parte sui form.. potresti essere più chiaro sul motivo e sul come..?