Newsgroup: it.comp.www.html
Titolo: Div annidati - differenze FF e IE

Ciao a tutti,
ho il seguente codice che credo banale ma che mi da comportamenti 
diversi su IE6 e FF 1.5.
In pratica, devo creare una tabella composta da un numero variabile di 
righe, all'interno delle quali ho un numero variabile di celle.
Ora, su IE6 il codice di seguito semba funzionare come io da buon 
principiante mi aspetterei, mentre su FF no (le celle NON risultano 
dentro le righe).
Se metto float:left anche in div.row, FF funziona e IE no!!!
Come posso risolvere?
TIA
Libra
/********** Codice *************/
div.box {
   float: left;
   border: #ff5500 solid 1px;
   height:100px
}
div.row {
   width: 200px;
   clear: right;
   border: #aaff00 solid 1px;
   padding: 10px;
}
</style>
<div style='width:200px; border: #000000 dashed 1px; float:left;'>
   <div class=row ID=1>
     <div class=box ID=1_1>Pippo</div>
     <div class=box ID=1_2>Pluto</div>
   </div>
   <div class=row ID=1>
     <div class=box ID=2_1>Paperino</div>
     <div class=box ID=2_2>Topolino</div>
     <div class=box ID=2_3>Nonna Papera</div>
   </div>
</div>
/*******************************/

 righe, all'interno delle quali ho un numero variabile di celle.
Ma se dici che devi creare una tabella, perché non usi <table>?
Non so se hai semplificato il codice, ma sembra proprio che una tabella 
faccia al caso tuo.
Inoltre:
- i valori degli attributi dovrebbero essere tra virgolette
- l'attributo id va scritto minuscolo
- c'è veramente necessità di tutti quegli id, uno per ogni tag?
<div class=box ID=2_1>Paperino</div>
bensì:
<div class="box" id="2_1">Paperino</div>
o meglio ancora:
<td>Paperino</td> :-)
Nello.

 Come posso risolvere?
Se metti un div come float, esso esce dal flusso della pagina, quindi il
comportamento corretto e` quello di FF.
Se sai che i box sono alti 100 px puoi forzare la riga ad essere alta
102 (visto che hai un bordo di 1 px) o piu`, e mettere un clear:left
alla riga stessa, in modo da non sovrapporsi alla riga precedente.
Le righe dovranno comunque essere float.
Ti consiglio di forzare un width sulle singole celle dentro l'html
(tramite style="width:xyz;"), per facilitare il float.
Insomma, ti consiglio di sviluppare con FF e poi adattare per IE6
(stando attento a non rompere FF), visto che IE7 funzionera` in modo
piu` simile a FF che non a IE6
Bye.
-- 
Alessandro Pellizzari

 - c'è veramente necessità di tutti quegli id, uno per ogni tag?
In sostanza si, perché poi devo potermi riferire ad ogni singola cella 
in modo univoco tramite javascript.
Saluti
Libra

    float: left;
Imho il float:left sulle righe è del tutto inutile.
-- 
Nando [?]
Apostolo della Prova

 in modo univoco tramite javascript.
Puoi usare le API del DOM: dai un id ad ogni riga e quindi (ipotizzando che
nelle righe siano presenti esclusivamente le div delle celle) puoi ottenere
un array delle celle della riga con:
var elts = document.getElementById(row_id).getElementsByTagName("DIV");
for (var i=0,n=elts.length;i<n;i++) {
  // elts[i] è un riferimento univoco alla cella i-esima della riga
  // ...


 Imho il float:left sulle righe č del tutto inutile.
Uh, si hai ragione, l'unica differenza e' che con float: left la riga si 
estende solo fino a comprendere le celle; senza, invece la riga si 
estende fino a riempire tutto lo spazio del contenitore.
Grazie
Ciao
Libra