Affichage div

Bonjour à tous
un exemple vaut mieux qu'un long discours

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="menuDroit2">
    <dl id="menuDroit">
 
    <dt onclick="montre('smenu77');">    <a href="#">ART DE LA TABLE</a></dt>
    <dd id="smenu77" style="display:none;">
    <ul>
    <li ><a href="index.php?module=ewp_cat&amp;page=catalogue.php&amp;rub=42">Les accessoires (le textile) (12)</a></li>
    <li ><a href="index.php?module=ewp_cat&amp;page=catalogue.php&amp;rub=44">Mobilier (2)</a></li>
    <li ><a href="index.php?module=ewp_cat&amp;page=catalogue.php&amp;rub=43">Services de table (44)</a></li>
    </ul>
    </dd>
    <center><div class="line"></div></center>
 
    <dt onclick="montre('smenu68');"><a href="#">CULTURE</a></dt>
    <dd id="smenu68" style="display:none;">
    <ul>
    <li ><a href="index.php?module=ewp_cat&amp;page=catalogue.php&amp;rub=11">Cuisine (12)</a></li>
    <li ><a href="index.php?module=ewp_cat&amp;page=catalogue.php&amp;rub=12">Divers (7)</a></li>
    <li ><a href="index.php?module=ewp_cat&amp;page=catalogue.php&amp;rub=10">Nature (5)</a></li>
    <li ><a href="index.php?module=ewp_cat&amp;page=catalogue.php&amp;rub=9">Sport (4)</a></li>
    </ul>
    </dd>
    <center><div class="line"></div></center>
 
    <dt onclick="montre('smenu73');"><a href="#">ENFANTS</a></dt>
    <dd id="smenu73" style="display:none;">
    <ul>
    <li ><a href="index.php?module=ewp_cat&amp;page=catalogue.php&amp;rub=46">Enfants (6)</a></li>
    </ul>
    </dd>
    <center><div class="line"></div></center>
 
    </dl>
</div>

la fonction montre(...) affiche ou cache le contenu de <dd>...</dd>

les sous-rubriques sont cachées et se déroule lorsque je clic sur la rubrique (ici la balise <dt>...</dt>)
le problème vient de ma ligne echo '<center><div class="line"></div></center>';
en fait dans Mozilla elle apparait bien entre mes rubriques
or dans IE (6 et 7) elle n'apparait sous une rubrique uniquement si j'ai déroulé lla rubrique ...
je ne comprends pas pourquoi
à tous hasard voilà ma css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
dt                                                    {margin:0px;padding-left:3px;padding-top:5px;list-style-type: none;font-size:11px;}
dl, dd, ul, li                                    {margin:0px;padding-left:3px;list-style-type:none;font-size:11px;}
dl#menuDroit                                {width: 170px;}
dl#menuDroit dt                            {cursor: pointer;margin: 2px 0;height:12px;line-height:12px;text-align:left;font-weight: bold;border: 0px solid gray;}
dl#menuDroit dd                            {border: 0px solid gray;}
dl#menuDroit li                            {text-align:left;padding-left:4px;}
dl#menuDroit li a, dl#menu dt a {color: #000;text-decoration: none;display: block;border: 0 none;height: 100%;}
dl#menuDroit dt a                        {color:#777777;}
dl#menuDroit dt a:hover                {color:#333333;}
dl#menuDroit li a                            {color:#556677;}
dl#menuDroit li a:hover                {color:#333333;}
div.line                                            {border-bottom:1px solid #DFDFDF; padding-top:4px;height:1px;width:125px;vertical-align:middle;}

j'ai rajouté en fichiers attachés les deux versions (mozilla avec les <div> visibles donc normal et IE avec les <div> non visibles donc pas normal)

merci d'avance pour votre aide