ciao a tutti: sto provando da stamattina senza molto successo questo codice

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">

<head>
<title>test</title>



    <style type="text/css">
    #tablabels {
        border-top      : 1px #ccc solid;
        border-bottom   : 1px #ccc solid;
        background      : #e8ecef;
    }
    
    ul {
        margin          : 7px 0 0 0;
        padding         : 0;
        list-style-type : none;
    }
    
    li {
        border          : 1px #ccc dotted;
        padding         : 0 10px;
        margin          : 0;
        width           : auto;
        display         : table-cell;
        vertical-align  : middle;
    }
    
    
    </style>
    
    
    
</head>



<body>   
    
    <div id="tablabels">
        <ul class="ucase">
            
            <li id="tab1label">Caratteristiche
            <li id="tab2label"><a href="#tab2" id="tab2link" title="Come si attiva" class="linktab" tabindex="27">Come si 
attiva</a>
            <li id="tab3label">Vedi anche
            <li id="tab4label">utilit&agrave; e supporto[/list]
    </div>
    
</body>
</html>
Ora questo realizza una sorta di tabbed navigation (navigazione a tab),
almeno per ciò che riguarda le etichette

Il problema è che solo firefox visualizza il codice esattamente come desidero, Opera
ci si avvicina molto, IE manco a parlarne

Che accorgimenti potrei adottare per rendere la visualizzazione come su firefox anche
sugli altri browser?

Il problema nasce dal fatto che una o più etichette potrebbe impegnare più di una
linea di testo e quindi anche le altre devono avere l'altezza di quella maggiore. Pensavo di aver risolto
con display: table-cell, ma vedo che (soprattutto) IE fa i capricci

Idee ??