[Résolu] problème de CSS sur un menu

problème de CSS sur un menu [Résolu] - HTML/CSS - Programmation

Marsh Posté le 06-09-2009 à 01:04:41    

Bonjour !
 
je bataille depuis plusieurs heures (ce qui explique l'heure à laquelle je poste ce sujet...) sur un problème de CSS.
Voici le site :  
http://www.escale-en-irlande.fr/irelandV2/
 
le problème est le menu puisque sous Opera et Firefox tout fonctionne (en tout cas sous Opera 10 et FF 3.5) mais sous IE 8 le sous menu ne s'affiche pas !  
 
et franchement je ne comprends pas.
je mets le code :  
 
le site :  

Code :
  1. <html>
  2. <head>
  3. </head>
  5. <body>
  6.  <div class="SiteGlobal">
  8.   <!-- div pour le contenu de la bannière -->
  9.   <div class="banniere_Z0">
  12.   </div>
  14.   <!-- div pour l'affichage du menu -->
  15.   <div class="menu_Z2">
  16.    <ul>
  17.     <li><a class="menu_Z2one" href="#nogo">Accueil</a></li>
  18.     <li><a class="menu_Z2two" href="#nogo">A visiter et à faire</a>
  19.      <table><tr><td>
  20.      <ul>
  21.      <li><a href="#nogo">Recherche géographique</a></li>
  22.      <li><a href="#nogo">Recherche thématique</a></li>
  23.      <li><a href="#nogo">Le shopping</a></li>
  24.      <li><a href="#nogo">La culture irlandaise</a></li>
  25.      </ul>
  26.      </td></tr></table>
  27.     </li>
  29.     <li><a class="menu_Z2three" href="#nogo">Les itinéraires</a>
  30.      <table><tr><td>
  31.      <ul>
  32.      <li><a href="#nogo">Conseils sur les itinéraires</a></li>
  33.      <li><a href="#nogo">L'Ouest</a></li>
  34.      <li><a href="#nogo">Le Sud-Ouest</a></li>
  35.      </ul>
  36.      </td></tr></table>
  37.     </li>
  39.     <li><a class="menu_Z2four" href="#nogo">S'y rendre</a>
  40.      <table><tr><td>
  41.      <ul>
  42.      <li><a href="#nogo">Généralités</a></li>
  43.      <li><a href="#nogo">L'avion</a></li>
  44.      <li><a href="#nogo">Le ferry</a></li>
  45.      </ul>
  46.      </td></tr></table>
  47.     </li>
  49.     <li><a class="menu_Z2five" href="#nogo">Se loger</a>
  50.      <table><tr><td>
  51.      <ul>
  52.      <li><a href="#nogo">Les petits prix</a></li>
  53.      <li><a href="#nogo">Les prix modérés</a></li>
  54.      <li><a href="#nogo">Le haut de gamme</a></li>
  55.      </ul>
  56.      </td></tr></table>
  57.     </li>
  59.     <li><a class="menu_Z2six" href="#nogo">Se déplacer</a>
  60.      <table><tr><td>
  61.      <ul>
  62.      <li><a href="#nogo">En voiture</a></li>
  63.      <li><a href="#nogo">Les transports en commun</a></li>
  64.      <li><a href="#nogo">Divers</a></li>
  65.      </ul>
  66.      </td></tr></table>
  67.     </li>
  69.     <li><a class="menu_Z2seven" href="#nogo">Utiles à savoir</a>
  70.      <table><tr><td>
  71.      <ul>
  72.      <li><a href="#nogo">Divers</a></li>
  73.      <li><a href="#nogo">La météo</a></li>
  74.      <li><a href="#nogo">A ne pas oublier</a></li>
  75.      <li><a href="#nogo">En cas d'urgence</a></li>
  76.      <li><a href="#nogo">La culture</a></li>
  77.      <li><a href="#nogo">Les comtés</a></li>
  78.      <li><a href="#nogo">Les régions</a></li>
  79.      </ul>
  80.      </td></tr></table>
  81.     </li>
  83.     <li><a class="menu_Z2height" href="#nogo">Liens</a></li>
  85.     <li><a class="menu_Z2nine" href="#nogo">Téléchargement</a></li>
  87.    </ul>
  88.   </div>
  91.   <!-- div pour l'affichage du bandeau droit -->
  92.   <div class="bandeauDroit_Z1">
  93.   bandeau
  94.   </div>
  96.   <!-- pour effectuer une recherche sur le site -->
  97.   <div class="recherche_Z2">
  98.     recherche
  99.   </div>
  101.   <!-- pour affiche le diapo des images + flêches suivantes précédentes -->
  102.   <div class="affichageImage_Z2">
  103.     image
  104.   </div>
  106.   <!-- pour l'affichage des événements à venir -->
  107.   <div class="affichageEvenements_Z2">
  108.     événements
  109.   </div>
  112.   <!-- div pour l'affichage des contenus des sites -->
  113.   <div class="contenuGlobal_Z0">
  115.   </div>
  117.   <!-- div pour l'affichage des mentions légales -->
  118.   <div class="mentionsLegales_Z2">
  119.   </div>
  121.  </div>
  122. </body>
  123. </html>


 
le CSS :

Code :
  1. /* pour l'affichage du menu */
  2. .menu_Z2{
  3. position : absolute;
  4. z-index : 2;
  5. top : 200px;
  6. float:left;
  7. width:100%;
  8. font-family: verdana, arial, sans-serif;
  9. font-size:11px;
  10. background:url(pictures/design/menu.gif) repeat-x top left;
  11. height:33px;
  12. border-top:2px solid #4c597f; 
  13. border-bottom:2px solid #4c597f;
  14. }
  16. .menu_Z2 ul {
  17. padding:0;
  18. margin:0;
  19. list-style-type:none;
  20. z-index : 2;
  21. }
  22. .menu_Z2 ul li {
  23. float:left;
  24. position:relative;
  25. background:url(pictures/design/divider.gif) no-repeat;
  26. z-index : 2;
  27. }
  29. .menu_Z2 ul li a, .menu_Z2 ul li a:visited {
  30. float:left;
  31. display:block;
  32. text-decoration:none;
  33. color:#ddf;
  34. padding:0px 15px;
  35. line-height:30px;
  36. height:30px;
  37. border-bottom:3px solid #fff;
  38. z-index : 2;
  39. }
  41. .menu_Z2 ul li a.menu_Z2one:hover {border-color:#c00; color:#f88;}
  42. .menu_Z2 ul li a.menu_Z2two:hover {border-color:#c60; color:#fc0;}
  43. .menu_Z2 ul li a.menu_Z2three:hover {border-color:#cc0; color:#cc0;}
  44. .menu_Z2 ul li a.menu_Z2four:hover {border-color:#080; color:#0e0;}
  45. .menu_Z2 ul li a.menu_Z2five:hover {border-color:#00c; color:#aaf;}
  46. .menu_Z2 ul li a.menu_Z2six:hover {border-color:#c0c; color:#f8f;}
  47. .menu_Z2 ul li a.menu_Z2seven:hover {border-color:#c0c; color:#f8f;}
  48. .menu_Z2 ul li a.menu_Z2height:hover {border-color:#c0c; color:#f8f;}
  49. .menu_Z2 ul li a.menu_Z2nine:hover {border-color:#c0c; color:#f8f;}
  51. .menu_Z2 ul li:hover a.menu_Z2one {border-color:#c00; color:#f88;}
  52. .menu_Z2 ul li:hover a.menu_Z2two {border-color:#c60; color:#fc0;}
  53. .menu_Z2 ul li:hover a.menu_Z2three {border-color:#cc0; color:#cc0;}
  54. .menu_Z2 ul li:hover a.menu_Z2four {border-color:#080; color:#0e0;}
  55. .menu_Z2 ul li:hover a.menu_Z2five {border-color:#00c; color:#aaf;}
  56. .menu_Z2 ul li:hover a.menu_Z2six {border-color:#c0c; color:#f8f;}
  57. .menu_Z2 ul li:hover a.menu_Z2seven {border-color:#c0c; color:#f8f;}
  58. .menu_Z2 ul li:hover a.menu_Z2height {border-color:#c0c; color:#f8f;}
  59. .menu_Z2 ul li:hover a.menu_Z2nine {border-color:#c0c; color:#f8f;}
  61. .menu_Z2 ul li ul {
  62. margin:0;
  63. list-style:none;
  64. display:none;
  65. background:#ffffff;
  66. width:136px;
  67. position:absolute;
  68. top:30px;
  69. position:absolute;
  70. }
  72. .menu_Z2 table {
  73. margin:0;
  74. border-collapse:collapse;
  75. font-size:11px;
  76. position:absolute;
  77. top:0;
  78. left:0;
  79. z-index : 2;
  80. display:block;
  81. }
  83. /* specific to non IE browsers */
  84. .menu_Z2 ul li:hover ul {
  85. display:block;
  86. position:absolute;
  87. top:32px;
  88. margin-top:1px;
  89. left:0;
  90. width:154px;
  91. border-bottom:1px solid #000;
  92. z-index : 2;
  93. }
  95. .menu_Z2 ul li:hover ul.endstop {
  96. left:-92px;
  97. z-index : 2;
  98. }
  100. .menu_Z2 ul li:hover ul li ul {
  101. display: none;
  102. z-index : 2;
  103. }
  105. .menu_Z2 ul li:hover ul li a {
  106. display:block;
  107. background:#fff;
  108. color:#000;
  109. height:auto;
  110. line-height:15px;
  111. padding:4px 16px;
  112. width:120px;
  113. border:1px solid #000;
  114. border-bottom:0;
  115. z-index : 2;
  116. }
  118. .menu_Z2 ul li:hover ul li a.drop {
  119. background:#ccd url(pictures/design/bullet1.gif) no-repeat 3px 8px;
  120. z-index : 2;
  121. }
  123. .menu_Z2 ul li:hover ul li a:hover {
  124. color:#000;
  125. background: #ccd url(pictures/design/bullet1.gif) no-repeat 3px 8px;
  126. z-index : 2;
  127. }
  129. .menu_Z2 ul li:hover ul li a:hover.drop {
  130. background: #ccd url(pictures/design/bullet1.gif) no-repeat 3px 8px;
  131. z-index : 2;
  132. }
  134. .menu_Z2 ul li:hover ul li:hover ul {
  135. display:block;
  136. position:absolute;
  137. left:153px;
  138. top:-1px;
  139. z-index : 2;
  140. }
  142. .menu_Z2 ul li:hover ul li:hover ul.left {
  143. left:-153px;
  144. z-index : 2;
  145. }


 
 
bref please de l'aide !!


Message édité par lordankou le 06-09-2009 à 10:53:08

---------------

Reply

Marsh Posté le 06-09-2009 à 01:04:41   

Reply

Marsh Posté le 06-09-2009 à 08:43:23    

met un doctype HTML Transitional 4.01

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">


tu le mets avant ta balise <html>
sans ça ton IE8 va considérer que ton site date d'avant guerre, que c'(est un site mal codé ou codé comme une merde et donc va utiliser le moteur de rendu de IE6.
 
Voila

Message cité 1 fois

---------------
Blablaté par Harko
Reply

Marsh Posté le 06-09-2009 à 10:52:43    

gatsu35 a écrit :

met un doctype HTML Transitional 4.01

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">


tu le mets avant ta balise <html>
sans ça ton IE8 va considérer que ton site date d'avant guerre, que c'(est un site mal codé ou codé comme une merde et donc va utiliser le moteur de rendu de IE6.
 
Voila


 
merci  :love:  :love:  
le pire dans tout ça c'est que je mets toujours le doctype ! mais là vu que je faisais des tests bah j'ai zappé (comme les meta d'ailleurs).
En tout cas un grand merci pour l'aide et je suis sûr de ne plus oublier de rajoutr le doctype !
 


---------------

Reply

Sujets relatifs:

Leave a Replay

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