Bug Menu IE 6 (marche sous FF et IE7)

Bug Menu IE 6 (marche sous FF et IE7) - HTML/CSS - Programmation

Marsh Posté le 14-05-2007 à 15:31:59    

Bonjour à tous (ça fait longtemps que je suis pas venu tiens).
 
Je suis sur un petit os, mais j'ai malheureusement pas trop le temps de galérer dessus, et je commence à être à court de solutions :  
 
Je n'ai pas de page à vous montrer, le résultat est plutot confidentiel.
 
Par contre, j'ai ça :  
 
le HTML

Code :
  1. <script language="javascript" type="text/javascript" src="Composants/_Menu.js"></script>
  3. <div id="MenuHorizontal" onMouseOver="SetNbSubMenu('3');">
  4.     <div class="MenuSeparator">&nbsp;</div>
  5.     <a href="#" id="Link_1" class="LinkLevel1" onMouseOver="HideAll();">Accueil</a>
  6.     <a href="#" id="Link_2" class="LinkLevel1" onMouseOver="HideAll();DispHideSubMenu('2');ClearSubMenuTimeOut();" onMouseOut="SubMenuTimeOut();">Cartes de visite</a>
  7.     <a href="#" id="Link_3" class="LinkLevel1" onMouseOver="HideAll();DispHideSubMenu('3');ClearSubMenuTimeOut();" onMouseOut="SubMenuTimeOut();">Suivi global</a>
  8. </div>
  10. <div style="display: none;" id="Sub_1" class="SubMenu">
  11.     <a class="LinkLevel2" href="#" onMouseOver="ClearSubMenuTimeOut();" onMouseOut="SubMenuTimeOut();" onClick="HideAll();">Sous-Menu 1</a>
  12. </div>
  13. <div style="display: none;" id="Sub_2" class="SubMenu">
  14. <a class="LinkLevel2" href="#" onMouseOver="ClearSubMenuTimeOut();" onMouseOut="SubMenuTimeOut();" onClick="HideAll();">Sous-Menu 1</a>
  15.     <a class="LinkLevel2" href="#" onMouseOver="ClearSubMenuTimeOut();" onMouseOut="SubMenuTimeOut();" onClick="HideAll();">Sous-Menu 2</a>
  16. </div>
  17. <div style="display: none;" id="Sub_3" class="SubMenu">
  18. <a class="LinkLevel2" href="#" onMouseOver="ClearSubMenuTimeOut();" onMouseOut="SubMenuTimeOut();" onClick="HideAll();">Sous-Menu 1</a>
  19.     <a class="LinkLevel2" href="#" onMouseOver="ClearSubMenuTimeOut();" onMouseOut="SubMenuTimeOut();" onClick="HideAll();">Sous-Menu 2</a>
  20.     <a class="LinkLevel2" href="#" onMouseOver="ClearSubMenuTimeOut();" onMouseOut="SubMenuTimeOut();" onClick="HideAll();">Sous-Menu 3</a>
  21.     <a class="LinkLevel2" href="#" onMouseOver="ClearSubMenuTimeOut();" onMouseOut="SubMenuTimeOut();" onClick="HideAll();">Sous-Menu 4</a>
  22. </div>


 
le JS

Code :
  1. var MyTimeOut;
  2.     var NbSousMenu;
  3.     MyTimeOut = '';
  4.     NbSousMenu = 3;
  6.     function SetNbSubMenu(Nombre)
  7.     {
  8.     NbSousMenu = Nombre;
  9.     }
  11.     function DispHideSubMenu(SubMenu)
  12.     {
  13.     document.getElementById('Sub_'+SubMenu).style.display = 'block';
  14.     document.getElementById('Sub_'+SubMenu).style.left = document.getElementById('Link_'+SubMenu).offsetLeft + "px";
  15.     //document.getElementById('Sub_'+SubMenu).style.top = (document.getElementById('Link_'+SubMenu).offsetTop + 30) + "px";
  16.    
  17.     SubMenuTimeOut();
  18.     }
  20.     function HideAll()
  21.     {
  22.     var i;
  23.     for (i = 1; i <= NbSousMenu; i++)
  24.     {
  25.      document.getElementById('Sub_'+i).style.display = 'none';
  26.     }
  27.     /*
  28.      document.getElementById('Sub_1').style.display = 'none';
  29.      document.getElementById('Sub_2').style.display = 'none';
  30.      document.getElementById('Sub_3').style.display = 'none';
  31.      document.getElementById('Sub_4').style.display = 'none';
  32.      document.getElementById('Sub_5').style.display = 'none';
  33.     */
  34.     }
  36.     function SubMenuTimeOut()
  37.     {
  38.     MyTimeOut += ','+setTimeout("HideAll()", 1200);
  39.     }
  41.     function ClearSubMenuTimeOut()
  42.     {
  43.     var TabTimeOut, i;
  44.    
  45.     TabTimeOut = MyTimeOut.split(',')
  46.     for (i=0; i<TabTimeOut.length; i++)
  47.     {
  48.      window.clearTimeout(TabTimeOut[i]);
  49.     }
  50.    
  51.     MyTimeOut = '';
  52.     }


 
et le CSS

Code :
  1. /*
  2. Couleurs Charte :  
  4. #002448 Bleu foncé
  5. #004080 ^
  6. #a6d2ff ^
  7. #cee7ff ^
  8. #ecf5ff Bleu Clair
  10. #57a0cc Gris/Bleu Foncé
  11. #a6cce3 ^
  12. #d1e6f1 ^
  13. #e7f1f8 Gris/Bleu Clair
  14. */
  16. .MenuSeparator
  17. {
  18.     float: left;
  19. }
  21. #MenuHorizontal
  22. {
  23. width: 100%;
  24. height: 30px;
  25. background-color: #2e5072;
  26. border-left: 1px solid #002448;
  27. border-right: 1px solid #002448;
  28.     border-bottom: 1px solid #002448;
  29. padding-top: 1px;
  30. }
  32. #MenuHorizontal .LinkLevel1, .LinkLevel1:visited
  33. {
  34. background-image: url("../images/Menu_Element.jpg" );
  35. background-repeat:no-repeat;
  36. color: #FFFFFF;
  37. text-decoration: none;
  38. position: relative;
  40. padding-top: 6px;
  42. height: 24px;
  44. float: left;
  45. display: block;
  46. width: 130px;
  47. text-align: center;
  48. }
  50. #MenuHorizontal .LinkLevel1:hover
  51. {
  52. background-image: url("../images/Menu_ElementHover.jpg" );
  53. text-decoration: underline;
  54. color: #002448;
  55. /*background-color: #002448;*/
  56. }
  58. #MenuHorizontal .LinkLevel1:active
  59. {
  60. color: #800000;
  61. }
  63. #MenuDate
  64. {
  65. width: 80px;
  66. height: 100%;
  67. float: right;
  68. }
  70. #MenuDate TD
  71. {
  72. font-size: 10px;
  73. vertical-align: middle;
  74. text-align: right;
  75. color: #ffffff;
  76. }
  78. .SubMenu
  79. {
  80. position: absolute;
  81. width: 132px;
  82. background-color: #2e5072;
  83. /*margin-top: 1px;*/
  84. border-bottom: 1px solid #002448;
  85. border-left: 1px solid #002448;
  86. border-right: 1px solid #002448;
  87. text-align: center; /* pour IE6 */
  88. }
  90. .LinkLevel2
  91. {
  92. width: 115px;
  93. max-width: 115px;
  94. position: relative;
  95. display: block;
  96. text-align: left;
  97. padding: 2px;
  98. background-color: #9daaba;
  99. border: 1px solid #002448;
  100. margin-bottom: 4px;
  101. margin-left: auto;
  102. margin-right: auto;
  103. clear: both;
  104. color: #ffffff;
  105. text-decoration: none;
  106. }
  108. .LinkLevel2:hover
  109. {
  110. background-color: #66A8B8;
  111. color: #FFFFFF;
  112. }
  114. .FondSubMenu
  115. {
  116. position: static;
  117. width: 100%;
  118. height: 100%;
  119. border: 1px solid #4D4D4D;
  120. z-index: -1;
  121. }


C'est un menu Horizontal avec sous-menu déroulant.
Le problème est que sous IE 6 (pas testé 5.5, mais à mon avis ça doit faire pareil), les éléments du sous menu, lorsqu'il y en a plus que 2, se décalent sur le hover (c'est la classe LinkLevel2 et le :hover), c'est à dire que la marge saute, comme ça.
 
Dans le js, rien de particulier (je pense). Donc là je ne vois pas vraiment d'ou ça peut venir.
 
Merci d'avance pour votre aide...
 

Reply

Marsh Posté le 14-05-2007 à 15:31:59   

Reply

Marsh Posté le 14-05-2007 à 16:49:13    

Ben dis donc, si le reste du code, ressemble à ça aussi, le projet confidentiel, va au mur :D
 
Pour des jolies menu, qui passe partout :
http://css.maxdesign.com.au/listamatic/index.htm

Reply

Marsh Posté le 14-05-2007 à 17:49:07    

Bah, c'est pas si terrible que ça quand même :D
 
Ya quand même des div et du css, au moins ça... Après c'est pas ultra compliant, mais bon, ça marche... J'ai malheureusement pas trop le temps de faire de l'optimisation.
 
Et non j'irais pas au mur, je sais tout de même un minimum développer ;)
 
Bref, personne pour le bug ?

Reply

Marsh Posté le 14-05-2007 à 20:00:13    

C'est vrai que dés qu'on met des div...tout de suite, on se sent plus puissant :o
on devrais coder, que en div, parler que en div...tu penses pas...

Reply

Marsh Posté le 15-05-2007 à 08:37:35    

Ca va finir en débat d'idées ça :D
 
Ce que je veux dire, c'est que j'ai passé l'époque des tableaux.
Faut pas s'enflammer.
 
J'ai pas demander d'avis sur mon code ou sur le site, je demande juste pourquoi sur IE6, sur le hover de mes links, ça bousille les margins (je pense que c'est ça) ou autre chose, et du coup mon lien bouge...
 
Personne n'a une idée ?

Reply

Marsh Posté le 15-05-2007 à 16:10:27    

Bon, j'ai du modifier mon menu, mais j'aimerais bien comprendre quand même...
 
Donc n'hésitez pas
 
:bounce:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed