Codage HTML tableau : problème de rendu Firefox/Chrome

<style type="text/css"> 
    #principal { 
        width: 100%; 
        font-family: Comic Sans MS; 
    } 
    #cadre { 
        width: 750px; 
        border: 1px solid black; 
        margin: auto; 
    } 
    #ligne1 { 
        height: 95px; 
        line-height: 95px; 
        background-color: #345588; 
        font-family: Times; 
        font-size: 24px; 
        color: white; 
        text-align: center; 
    } 
    #ligne2 { 
        height: 130px; 
        border-bottom: 1px solid black; 
        border-top: 1px solid black; 
    } 
    #colonne21 { 
        float: left; 
        width: 25%; 
        height: 100%; 
        background-color: #DDEBF6; 
        font-size: 24px; 
        text-align: center; 
        display: table-cell; 
        vertical-align: middle; 
    } 
    #colonne22 { 
        float: left; 
        width: 75%; 
        height: 100%; 
        background-color: #9BC1E6; 
        font-size: 18px; 
        text-align: center; 
    } 
    #ligne3 { 
        height: 400px; 
    } 
    #colonne31 { 
        float: left; 
        width: 308px; 
        text-align: center; 
    } 
    #colonne32 { 
        float: left; 
        width: 165px; 
        height: 100%; 
        text-align: center; 
        color: white; 
        background-color: #2C76B7; 
        font-size: 18px; 
        border-left: 1px solid black; 
        border-right: 1px solid black; 
    } 
    #colonne33 { 
        float: left; 
        width: 275px; 
        font-size: 24px; 
        text-align: center; 
        line-height: 100px; 
    } 
    .claire { 
        background-color: #DDEBF6; 
        border-bottom: 1px solid black; 
    } 
    .foncee { 
        background-color: #9BC1E6; 
    } 
</style> 

<div id="principal"> 
    <div id="cadre"> 
        <div id="ligne1">IMAGE BISMILLAH PLUS TITRE : J'apprends l'alphabet arabe</div> 
        <div id="ligne2"> 
            <div id="colonne21">L'alphabet<br />lettre par lettre</div> 
            <div id="colonne22">Moustafa Abou Oumama a conçu pour vous cette série de cours dans laquelle une lettre égale un cours. Ne vous méprenez pas, en plus de vous apprendre le nom et la prononciation de chaque lettre, bien d'autres choses sont à découvrir à l'intérieur de ces cours.</div> 
        </div> 
        <div id="ligne3"> 
            <div id="colonne31"><img width="220" height="310" alt="" src=".../document/images/livre_alpha_arabe.png" /></div> 
            <div id="colonne32">Cet ensemble de séries concernant l'alphabet a été fait en étudiant le livre ci-contre, dont les références sont les suivantes : J'apprends l'Alphabet Arabe, paru aux éditions Sana, et signé Mahrez Landoulsi.</div> 
            <div id="colonne33"> 
                <div id="ligne331" class="claire">Première série</div> 
                <div id="ligne332" class="foncee">Deuxième série</div> 
                <div id="ligne333" class="claire">Troisième série</div> 
                <div id="ligne334" class="foncee">Quatrième série</div> 
            </div> 
        </div> 
    </div> 
</div>