Tag <sup> fa sballare la scritta

Ho questi codici che stampano giorno e ora americani, ma col tag <sup> stampa così: Monday, Aug 13th 2012 10:27:52 am (Le parti in rosso le stampa all'apice).
Essendo 2 codici indipendenti, non capisco perché non stampa in linea, se invece tolgo il tag si allinea tutto.

//Date inglesi: Inglese=giorno+mese / Americano=mese+giorno
function data() {
var now = new Date();
var giornosett = now.getDay();
var giorno = now.getDate();
var mese = now.getMonth(); 
var anno = now.getFullYear();
var nameDay = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var nameMth = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug', 'Sep','Oct','Nov’,‘Dec');
if (giorno ==1 || giorno ==21 || giorno ==31) { giorno=+giorno+'<sup>st</sup>'; }; 
if (giorno ==2 || giorno ==22) { giorno=+giorno+'<sup>nd</sup>'; }; 
if (giorno ==3 || giorno ==23) { giorno=+giorno+'<sup>rd</sup>'; }; 
if (giorno >=4 && giorno <=20 || giorno ==30) { giorno=+giorno+'<sup>th</sup>'; };  
document.write(' '+ nameDay[giornosett] + ', ' + nameMth[mese] + '  ' + giorno + '  ' + anno + '&nbsp;&nbsp;');
} 

//Ora con am, pm
function startTime() { 
var today = new Date(); 
var ora = today.getHours();
var minuti = today.getMinutes(); 
var secondi = today.getSeconds(); 
var partegiorno = ora < 12 ? "am" : "pm";
if (ora > 12) ora -= 12;
else if (ora == 0) ora = 12;
if (minuti<=9) { minuti='0'+minuti; }; 
if (secondi<=9) { secondi='0'+secondi; }; 
setTimeout(function() { startTime() },1000); 
document.getElementById('txt').innerHTML = ora + ':' + minuti + ':' + secondi + ' ' + partegiorno; 
} 

[saitfainder]

Hai una pagina di esempio su cui possiamo controllare il codice?

Hai una pagina di esempio su cui possiamo controllare il codice?

http://www.bellezzalive.altervista.org/

[acsocmel]

è una questione di interlinea
raddoppiala

è una questione di interlinea
raddoppiala

CSS?

#DateTime {
    float: left;
    width: 300px; 
    height: auto;
    font-family: arial;
    font-size: 0.75em; color: #666666;
    margin-top: -15px; 
}

#data-ora { 
    float: left;
    width: auto;
    height: auto;
}
                                   
#txt {
    float: left;
    width: auto;
    height: auto; 
}

<div id="DateTime">
<div id="data-ora"><script type="text/javascript">data();</script></div>
<div id="txt"></div>
</div>

[saitfainder]

Io, per farla semplice, toglierei quei <div> (con float:left su #data-ora e #txt) e sostituirei degli <span>.

Io, per farla semplice, toglierei quei <div> (con float:left su #data-ora e #txt) e sostituirei degli <span>.

Perfetto