Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1028 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Bug Menu IE 6 (marche sous FF et IE7)

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Bug Menu IE 6 (marche sous FF et IE7)

n°1560187
backdafuck​up
Back to da old skool
Posté le 14-05-2007 à 15:31:59  profilanswer
 

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...
 

mood
Publicité
Posté le 14-05-2007 à 15:31:59  profilanswer
 

n°1560279
xtof_83
Freeride Spirit
Posté le 14-05-2007 à 16:49:13  profilanswer
 

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

n°1560341
backdafuck​up
Back to da old skool
Posté le 14-05-2007 à 17:49:07  profilanswer
 

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 ?

n°1560406
xtof_83
Freeride Spirit
Posté le 14-05-2007 à 20:00:13  profilanswer
 

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...

n°1560454
backdafuck​up
Back to da old skool
Posté le 15-05-2007 à 08:37:35  profilanswer
 

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 ?

n°1560732
backdafuck​up
Back to da old skool
Posté le 15-05-2007 à 16:10:27  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Bug Menu IE 6 (marche sous FF et IE7)

 

Sujets relatifs
[Resolu] [XEmacs] Controle-Espace ne marche pasBug sous ie6
[Résolu] Autorun ou menu DVD ?[CSS & Javascript] Bug avec le navigateur Safari
Blabla@Programmation !! Y marche c'ui là (en attendant mieux)menu dyn joomla
Comportement bizarre sous IE7 => bug?Requette qui marche sur une base, mais pas sur l'autre
omment intégrer des onglets, sur un menu dynamique JavascriptBug incopréhension ciblage
Plus de sujets relatifs à : Bug Menu IE 6 (marche sous FF et IE7)

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.108 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR