problème de hauteur d'un DIV sous IE

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : problème de hauteur d'un DIV sous IE

problème de hauteur d'un DIV sous IE

par Khorne_fr1 » 31 mars 2006, 15:32

Bonjour,

j'ai récupé un code pour réaliser un menu déroulant en CSS et javascript.

J'ai rajouté une partie pour permettre des sous-sous-menu.

Le problème c'est qu'à partir du deuxième sous-niveau, le calque contenant le deuxième sous-niveau est demesuré sous Internet Explorer et sous Firefox ca s'affiche normalement.

Je me permet de vous coller mon code si dessus

Code : Tout sélectionner

<div id='menu'> <ul title='site_menu' class='menu_level_0' id="layer_root"> <li id="layer_1" class='menu_level_0'><a href="" onmouseover="CL();OL('ulayer_1','image1');" onmouseout="STCL('ulayer_1');" onfocus="OL('ulayer_1','image1');"><img id="image1" class="imageMenu" src="post.gif" alt="" border="0"></a> <ul id='ulayer_1' onmouseover="KOL();" onmouseout="STCL('ulayer_1');" class='menu_level_1'> <li id='layer_1_1' class='li_off' onmouseover="ClassLIon('layer_1_1');" onmouseout="ClassLIoff('layer_1_1');"> <a href="">Sites internet</a> </li> <li id='layer_1_2' class='li_off' onmouseover="ClassLIon('layer_1_2');" onmouseout="ClassLIoff('layer_1_2');"> <a href="">Menu2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> </li> </ul> </li> <li id="layer_2" class='menu_level_0'><a href="" onmouseover="CL();OL('ulayer_2','image2');" onmouseout="STCL('ulayer_2');" onfocus="OL('ulayer_2','image2');"><img id="image2" class="imageMenu" src="post.gif" alt="" border="0"></a> <!-- SOUS MENU 1--> <ul id='ulayer_2' onmouseover="KOL();" onmouseout="STCL('ulayer_2');" class='menu_level_1'> <li id='layer_2_1' class='li_off' onmouseover="ClassLIon('layer_2_1');" onmouseout="ClassLIoff('layer_2_1');"> <a href="">Sites internet</a> </li> <li id='layer_2_2' class='li_off' onmouseover="ClassLIon('layer_2_2');" onmouseout="ClassLIoff('layer_2_2');"><a href="" onmouseover="OSL('ulayer_2_2','layer_2_2');" onmouseout="STCSL('ulayer_2_2');" onfocus="OSL('ulayer_2_2','layer_2_2');">Menu2</a> <!-- SOUS MENU 2--> <ul id='ulayer_2_2' onmouseover="KOSL('ulayer_2_2');" onmouseout="STCSL('ulayer_2_2');" class='menu_level_1'> <li id='layer_2_2_1' class='li_off' onmouseover="ClassLIon('layer_2_2_1');" onmouseout="ClassLIoff('layer_2_2_1');"> <a href="">Sites internet</a> </li> <li id='layer_2_2_2' class='li_off' onmouseover="ClassLIon('layer_2_2_2');" onmouseout="ClassLIoff('layer_2_2_2');"><a href="" onmouseover="OSL('ulayer_2_2_2','layer_2_2_2');" onmouseout="STCSL('ulayer_2_2_2');" onfocus="OSL('ulayer_2_2_2','layer_2_2_2');">Menu2</a> <!-- SOUS MENU 3--> <ul id='ulayer_2_2_2' onmouseover="KOSL('ulayer_2_2_2');" onmouseout="STCSL('ulayer_2_2_2');" class='menu_level_1'> <li id='layer_2_2_2_1' class='li_off' onmouseover="ClassLIon('layer_2_2_2_1');" onmouseout="ClassLIoff('layer_2_2_2_1');"> <a href="">Sites internet</a> </li> <li id='layer_2_2_2_2' class='li_off' onmouseover="ClassLIon('layer_2_2_2_2');" onmouseout="ClassLIoff('layer_2_2_2_2');"> <a href="">Menu2</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>

Et la partie CSS qui correspond aux sous-menu

Code : Tout sélectionner

#submenu1 { text-align: left; border-top: 1px solid #A31D61; border-left: 1px solid #A31D61; border-right: 1px solid #A31D61; } #submenu1 li a { text-decoration: none; color: #ffffff; } #submenu1 li a:hover { text-decoration: none; color: #ffffff; } #submenu2 { text-align: left; border-top: 1px solid #A31D61; border-left: 1px solid #A31D61; border-right: 1px solid #A31D61; } #submenu2 li a { text-decoration: none; color: #ffffff; } #submenu2 li a:hover { text-decoration: none; color: #ffffff; } .li_off { background-color: #E62988; border-bottom: 1px solid #A31D61; list-style-type: none;} .li_on { background-color: #F07FB8; border-bottom: 1px solid #A31D61; list-style-type: none;} .imageMenu { float: left; } .menu_level_0 { list-style-type: none; margin-left: 0px; padding-left: 0px; margin: 0px; padding: 0px; display: inline; } .menu_level_1 { position: absolute; visibility: hidden; list-style-type: none; vertical-align: top; margin: 0px; padding: 0px; cursor: pointer; z-index: 3; display: block; } .menu_level_1 a { font-family: arial, helvetica, geneva, Swiss, SunSans-Regular; text-decoration: none; font-size: 11px; z-index: 1; white-space: nowrap; margin-left: 4px; margin-right: 4px; } #menu { Z-INDEX: 1; WIDTH: 200px; POSITION: relative; HEIGHT: 18px }

Vous pouvez le voir en action ici: http://www.clan-rca.info/menu_dhtml.html

En espérant que quelqu'un puisse m'aider