Ciao a tutti,

ho creato un semplice codice per visualizzare alcuni oggetti tramite i CSS. Questo codice funziona bene in FireFox ma ha qualche problema su Safari.
Un esempio della pagina è presente al sito: http://www.pesolelab.it/ernesto/cluster.html
In particolare, sotto il rettangolo grigio sono presenti tutta una serie di oggetti, ciascuno dei quali è costituito da un'alternanza di un rettangolo verde ed una linea. Consideriamo solo i primi 4. La parte terminale dei primi quattro oggetti dovrebbe allinearsi. In FireFox funziona bene ma in Safari appaiono sfalsati.
Ogni oggetto è presente un un suo contenitore e tutti sono presenti in un unico contenitore. Di seguito vi lenco il codice utilizzato:

#trascritto {
width: 1000px;
height: 30px;
margin: 0;
padding: 0;
}
#AS {
height: 20px;
margin: 0;
padding: 0;
}
#contenitore {
float: left;
width: 1000px;
margin: 0;
border: 0px solid #000;
}
#start {
float:left;
margin: 0;
text-align: left;
width: 10%;
margin: 0 0 0 0;
}
#end {
float:left;
margin: 0;
text-align: right;
width: 90%;
margin: 0 0 0 0;
}
</style>

<div id="contenitore">
<div id="trascritto">
<p style="float: left; width: 878.196628px; height: 15px; margin: 0 0 0 0; background: white;"></p>
<p style="float: left; width: 12.881228px; height: 15px; margin: 0 0 0 0; background: green;" onMouseover="ddrivetip('<table border=0 cellspacing=1 cellpadding=1><tr><td colspan=2>S16346090</td></tr><tr><td>Exon</td><td>5356-5423</td></tr><tr><td colspan=2>Strand plus</td></tr></table>','yellow', 300);" onMouseout="hideddrivetip();"></p>
<p style="float: left; height: 2px; overflow: hidden; width: 16.669824px; margin: 0.35em 0 0 0; background: #000000;" onMouseover="ddrivetip('<table border=0 cellspacing=1 cellpadding=1><tr><td colspan=2>S16346090</td></tr><tr><td>Intron</td><td>5424-5511</td></tr><tr><td colspan=2>Strand plus</td></tr></table>','yellow', 300);" onMouseout="hideddrivetip();"></p>
<p style="float: left; width: 22.731578px; height: 15px; margin: 0 0 0 0; background: green;" onMouseover="ddrivetip('<table border=0 cellspacing=1 cellpadding=1><tr><td colspan=2>S16346090</td></tr><tr><td>Exon</td><td>5512-5631</td></tr><tr><td colspan=2>Strand plus</td></tr></table>','yellow', 300);" onMouseout="hideddrivetip();"></p>
<p style="float: left; height: 2px; overflow: hidden; width: 19.511271px; margin: 0.35em 0 0 0; background: #000000;" onMouseover="ddrivetip('<table border=0 cellspacing=1 cellpadding=1><tr><td colspan=2>S16346090</td></tr><tr><td>Intron</td><td>5632-5734</td></tr><tr><td colspan=2>Strand plus</td></tr></table>','yellow', 300);" onMouseout="hideddrivetip();"></p>
<p style="float: left; width: 35.991665px; height: 15px; margin: 0 0 0 0; background: green;" onMouseover="ddrivetip('<table border=0 cellspacing=1 cellpadding=1><tr><td colspan=2>S16346090</td></tr><tr><td>Exon</td><td>5735-5924</td></tr><tr><td colspan=2>Strand plus</td></tr></table>','yellow', 300);" onMouseout="hideddrivetip();"></p>
<p style="float: left; width: 14.017806px; height: 15px; margin: 0 0 0 0; background: white;"></p>
</div>
</div>

Ho inserito il codice relativo all'oggetto sulla prima riga sotto quella grigia.
La somma dei pixels di ogni rettangolo e linea è pari a 1000px, ovvero la larghezza del contenitore.

No riesco a capire come mai FireFox mostri il tutto correttamente mentre safari è come se si "perdesse qualche pixel".

Grazie mille per qualsiasi suggerimento

Ernesto