Ciao a tutti e grazie in anticipo a chi mi vorrà aiutare.
Premetto che non sono un guru dei CSS ma, dopo aver sbattuto la testa per qualche giorno, mi sono arreso e chiedo aiuto.
Vorrei simulare il layout di Gestione Risorse di Windows in un controllo server ASP.NET; in sintesi dovrebbe avere una toolbar in testa, seguita da unall'inizio, un box che conterrà le cartelle sulla sinistra e un box con i file sulla destra. I due box hanno le scrollbar verticali.
Per semplificare ho estratto l'HTML e incluso il CSS nell'HTML stesso:
Su FF il layout è perfetto, mentre su IE6 il box di sinistra e di destra "sbordano" e non hanno le scrollbar. Inoltre sia la toolbar che il box del percorso non occupano tutta la larghezza.codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html> <head> <style type="text/css"> .control { position:absolute; top:20px; left:20px; height:350px; width:350px; border-style:solid; border-width:1px; float: right; } .toolbar { position:absolute; top:0px; left:0px; right:0px; height:24px; margin:0px; padding:4px 8px 4px 8px; border-width:1px; border-style:outset; background-color:#F5F5F5; } .path { position:absolute; top:34px; left:0px; right:0px; height:16px; margin:0px; padding:2px; border-width:1px; border-style:inset; background-color:White; overflow:hidden; } .content { position:absolute; top:58px; bottom:0px; right:0px; left:0px; background-color:Green; } .tree { position:absolute; top:0px; left:0px; bottom:0px; width:200px; padding:5px; float:left; overflow: auto; border-right: solid 1px black; background-color: #F5F5F5; float: right; } .files { position:absolute; top:0px; left:210px; right:0px; bottom:0px; padding:5px; overflow:auto; background-color: #F5F5F5; float: right; } </style> </head> <body> <div class="control"> <div class="toolbar"> toolbar </div> <div class="path"> percorso corrente </div> <div class="content"> <div class="tree"> albero cartelle riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx riga sx ultima riga sx </div> <div class="files"> elenco files riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx riga dx ultima riga dx </div> </div> </div> </body> </html>
Ho provato a modificare il CSS in ogni modo (con l'intenzione di usare poi i commenti condizionali) ma senza successo.
Dove sto sbagliando?
Rispondi quotando
, per iniziare ho preferito riprodurre pixel per pixel quello che avevo progettato su carta.
: volevo una cosa semplice che chiunque, con un copia/incolla, potesse testare velocemente.