tabella strana

[luckino69]

Ragazzi, vi prego datemi una mano, sta cosa stupissima mi sta facendo diventare scemo!
allora ho questa parte html:

<div id="xsnazzy"> 
                        <b class="xtop"><b class="xb1">[/b]<b class="xb2">[/b]<b class="xb3">[/b]<b class="xb4"> 
                        [/b][/b] 
                        <div id="xboxcontenuto"> 
                            <h3> 
                                Caratteristiche immobile</h3> 
                            <dl class="table-displaysinistro"> 
                                <dt>Categoria</dt><dd></dd> 
                                <dt>Locali</dt><dd></dd> 
                                <dt>Bagni</dt><dd></dd> 
                                <dt>Metri Quadri</dt><dd></dd> 
                                <dt>Box auto</dt><dd></dd> 
                                <dt>MQ Box auto</dt><dd></dd> 
                                <dt>Balcone</dt><dd></dd> 
                                <dt>Terrazzo</dt><dd></dd> 
                                <dt>Giardino</dt><dd></dd> 
                                <dt>MQ Giardino</dt><dd></dd> 
                            </dl> 
                            <dl class="table-displaydestro"> 
                                <dt>Ascensore</dt><dd></dd> 
                                <dt>Unità immobiliari</dt><dd></dd> 
                                <dt>Piano</dt><dd></dd> 
                                <dt>Riscaldamento</dt><dd></dd> 
                                <dt>Spese condominiali mese</dt><dd></dd> 
                                <dt>Età immobile</dt><dd></dd> 
                                <dt>Stato</dt><dd></dd> 
                                <dt>Stato al rogito</dt><dd></dd> 
                                <dt>Rif. Annuncio</dt><dd></dd> 
                                <dt>Codice</dt><dd></dd> 
                            </dl> 
                            <div class="clear"> 
                            </div> 
                        </div> 
                        <b class="xbottom"><b class="xb4">[/b]<b class="xb3">[/b]<b class="xb2">[/b]<b class="xb1"> 
                        [/b][/b] 
                    </div>

e questa è la parte relativa del css:

dl.table-displaydestro { width: 385px; margin:5px 3px 0px 5px; float:left }
dl.table-displaysinistro { width: 330px; margin:5px 20px 0px 5px; float:left }

.table-displaydestro dt {
    width: 23em; float: left; margin: 0 0 0 0; padding: 4px;
    border-top: 1px solid #DDD; font-weight: bold; line-height:10px
}

.table-displaysinistro dt {
    width: 21em; float: left; margin: 0 0 0 0; padding:4px;
    border-top: 1px solid #dddddd; font-weight: bold; line-height:10px
}

dt { clear: both; }

.table-displaydestro dd
{
    float: left; width: 18em; margin: 0 0 0 0; padding: 4px;
    border-top: 1px solid #DDD; line-height:10px; height: 10px
}

.table-displaysinistro dd {
    float: left; width: 18em; margin: 0 0 0 0; padding: 4px;
    border-top: 1px solid #dddddd; line-height:10px
}

#xboxcontenuto {display:block; background:#FFFFFF; border:0 solid #dddddd; border-width:0 1px;}
#xboxcontenuto ul { border:solid1px #000000; font-size:12x; padding:10px;}
#xboxcontenuto ul.destro { float:right;  margin-right:40px}
#xboxcontenuto ul.sinistro { float:left;}
#xboxcontenuto ul.sinistro li{  display: block; width:250px; position:relative}
#xboxcontenuto ul.destro li{  width:150px}
#xboxcontenuto ul.destro li span { float:none; border: 1px solid #333333}
#xboxcontenuto ul.sinistro  span { float:none; display:block; position:absolute; right:0; width:100px; clear:right;}
#xboxcontenuto li { font-size:12x; font-weight:bold;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}

dt { clear: both; }

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 0px; letter-spacing:1px;margin-bottom:0px}
#xsnazzy h1 {font-size:2.5em; color:#fff; margin-bottom:0px}
#xsnazzy h2 {font-size:2em;color:#dddddd; border:0;}
div#container h3, #xsnazzy h3 {font-size:17px;color:#666666; padding-left:5px}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:5px 0px 5px 0px;}

le due tabelle mi vengono tutte storte, i bordi rimangono bloccati alla fine della parola quando dovrebbero essere continui.
Ho provato a modificare tutti i parametri, ma non vi trovo soluzione.
Se provate ad incollare i due file vedrete lo schifo!
Vi prego datemi una mano sto impazzendo!
Grazie ciao

[Mich_]

Anzitutto evita gli erorri di sintassi: possono mandare in palla i browser.
In particolare i tag [b] non si possono innestare (e inoltre sono tag deprecati, quindi sarebbero da evitare)

Poi inizia con il fare pulizia: il tuo CSS non e` strutturato in modo razionale: ci sono oggetti formattati piu` di una volta tramite selettori diversi e la formattazione nei vari casi e` diversa: in questi casi le varie regole possono dare risultati diversi in browser diversi.
Inoltre questo aumenta la confusione (mentale) del povero umano che ci deve mettere mano, e questo non aiuta a realizzare cose funzionanti.

Non vedo errori eclatanti in quel codice, ma per metterci mano io personalmente dovrei riscrivere tutto il CSS strutturandolo correttamente; tuttavia ritengo che sia conveniente che questo lo faccia tu: in tal modo ti impadronisci del tuo codice e lo controlli tu, non ti lasci manipolare da un oggetto che forse hai copiato e modificato senza realizzare cosa effettivamente sta facendo.

Ho notato inoltre che mescoli unita` di misura diverse (px e em): non e` una bella idea, prova ad usare solo gli em, e sta' attento che la somma delle parti interne non superi il contenitore (poterbbe essere quello che scombina il tutto)