Problème de compatibilité IE et FF ...

Problème de compatibilité IE et FF ... - HTML/CSS - Programmation

Marsh Posté le 21-03-2008 à 07:53:12    

Bonjour, j'ai réussi à faire un menu déroulant en CSS sans javascript et j'ai un petit soucis de compatibilité.
Dans firefox la barre se déroule correctement mais sous internet explorer il ne se passe rien ça va faire quelque temps que je suis dessus  :(  
 
Code de ma page index.php :  

Code :
  1. <html>
  3. <head>
  4. <title>Association - L'Hydre O'Mel</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  6. <meta name="robots" content="all" />
  7. <link rel="stylesheet" type="text/css" href="form.css" title="default" media="screen" />
  8. <link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
  9. </head>
  11. <body>
  12. <center>
  14. <table id="Tableau_01" width="1024" height="819" border="0" cellpadding="0" cellspacing="0">
  16. <tr>
  17.  <td colspan="5"><img src="images/index_01.jpg" width="1024" height="149" alt=""></td>
  18. </tr>
  19.    
  20.     <tr>
  21.  <td colspan="3"><img src="images/index_02.jpg" width="205" height="86" alt=""></td>
  22.  <td rowspan="3"><div class="conteneur"></div></td>
  23.  <td rowspan="3"><img src="images/index_04.jpg" width="204" height="670" alt=""></td>
  24. </tr>
  25.    
  26. <tr>
  27.  <td rowspan="2"><img src="images/index_05.jpg" width="12" height="584" alt=""></td>
  28.  <td>
  29.   <div class="conteneur_menu">
  30.             <div class="menu"> <?php include('menu.html') ?> </div>         
  31.             </div>
  32.         </td>
  33.  <td rowspan="2"><img src="images/index_07.jpg" width="13" height="584" alt=""></td>
  34. </tr>
  36.     <tr>
  37.  <td><img src="images/index_08.jpg" width="180" height="11" alt=""></td>
  38. </tr>
  39.    
  40. </table>
  42. </center>
  43. </body>
  44. </html>


 
Code de ma page menu.html :  

Code :
  1. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5. <meta name="robots" content="all" />
  6. <link rel="stylesheet" type="text/css" href="form.css" title="default" media="screen" />
  7. <link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
  8. </head>
  10. <body>
  11. <center>
  13. <ul id="menuDeroulant">
  15.  <li><a href="index.php">Accueil</a></li>
  16.      <li><a href="news.php">News</a></li>
  17.  <li><a href="forum/">Forum</a></li>
  19.         <li><a href="#">Activités</a>
  20.   <ul class="sousMenu">
  21.           <li><a href="warhammer-40k.php">Warhammer 40.000</a></li>
  22.    <li><a href="warhammer-battle.php">Warhammer Batle</a></li>
  23.    <li><a href="infinity.php">Infinity</a></li>
  24.    <li><a href="jdr.php">Jeux de Rôles</a></li>
  25.    <li><a href="poker.php">Poker</a></li>
  26.    <li><a href="magic.php">Magic l'Assemblée</a></li>
  27.    <li><a href="lan.php">Jeux en Réseau</a></li>
  28.   </ul>
  29.  </li>
  31.  <li><a href="plan.php">Plan</a></li>
  32.  <li><a href="contact.php">Contact</a></li>
  33.  <li><a href="photos.php">Photos</a></li>
  35. </ul>
  37. </center>
  38. </body>
  39. </html>


 
Code de mon form.css :

Code :
  1. /*----------------------  Corps de la page  ----------------------*/
  3. body {
  4. background-color:black;
  5. margin-top:25px;
  6. font-size:11px;
  7. font-size-adjust:none;
  8. font-stretch:normal;
  9. font-style:normal;
  10. font-variant:normal;
  11. font-weight:normal;
  12. line-height:normal;
  13. margin:0pt;
  14. padding:0pt;
  15. }
  16. /*----------------------  Bloc mise en page ( index.php ) ----------------------*/
  18. .conteneur {
  19. background-image:url("images/index_03.jpg" );
  20. display:block;
  21. height:670px;
  22. width:615px;
  23. }
  25. /*----------------------  Menu déroulant ( index.php ) ----------------------*/
  27. .conteneur_menu {
  28. background-image:url("images/index_06.jpg" );
  29. display:block;
  30. height:573px;
  31. widht:180px;
  32. }
  33. .menu {
  34. height:573px;
  35. widht:180px;
  36. }
  38. /*----------------------  Menu déroulant ( menu.html ) ----------------------*/
  40. #menuDeroulant {
  41. list-style-type: none;
  42. margin: 0;
  43. padding: 0;
  44. border: 0;
  45. position: absolute;
  46. top: 300px;
  47. left: auto;
  48. right:auto;
  49. }
  50. #menuDeroulant li {
  51. border-top: 1px solid transparent;
  52. margin: 0;
  53. padding:0;
  54. width:120px;
  55. }
  56. #menuDeroulant .sousMenu {
  57. display: none;
  58. list-style-type: none;
  59. margin: 0;
  60. padding: 0;
  61. border: 0;
  62. }
  63. #menuDeroulant li a:link, #menuDeroulant li a:visited {
  64. display: block;
  65. height: 1%;
  66. width:165;
  67. color: #FFF;
  68. background: #312d26; /* Menu : couleurs des barres */
  69. text-decoration: none;
  70. font-weight: bold ;
  71. font-size:12px;
  72. font-family: Geneva, Arial, Helvetica, sans-serif;
  73. padding: 4px 8px;
  74. border: 1px solid gray;
  75. margin: 0;
  76. }
  77. #menuDeroulant li a:hover { background-color: #4b4c3f; } /* Menu : couleur changeante au passage de la souris */
  78. #menuDeroulant li a:active { background-color: #3B4E77; } /* Menu : couleur changeante quand on clic sur un lien */
  80. #menuDeroulant .sousMenu li a:link,
  81. #menuDeroulant .sousMenu li a:visited {
  82. display: block;
  83. color: #000000; /* Sous Menu : couleur du texte */ 
  84. font-weight: bold ;
  85. font-size:12px;
  86. font-family: Geneva, Arial, Helvetica, sans-serif;
  87. margin: 0;
  88. border: 0;
  89. text-decoration: none;
  90. background: transparent url("fond.png" ) repeat;
  91. border: 1px solid gray;
  92. }
  93. #menuDeroulant .sousMenu li a:hover {
  94. background-image: none;
  95. background-color: #534944; /* Sous Menu : couleur changeante au passage de la souris */
  96. }
  97. #menuDeroulant .sousMenu li {
  98. margin: 0;
  99. padding: 0;
  100. border: 0;
  101. width: 149px;
  102. border-top: 1px solid transparent;
  103. }
  105. #menuDeroulant li:hover > .sousMenu { display: block; }
  106. #menuDeroulant .sousMenu li
  107. {
  108. margin: 0;
  109. padding: 0;
  110. }

 
 
Voila quelqu'un aurait il une idée s'il vous plait, sans rajouté de javascript si possible.
Merci d'avance  :jap:

Reply

Marsh Posté le 21-03-2008 à 07:53:12   

Reply

Marsh Posté le 21-03-2008 à 08:28:48    

La pseudo class :hover ne fonctionne pas avec des li sous IE6

Reply

Marsh Posté le 21-03-2008 à 09:36:06    

Oué je sais mais j'ai oublié de préciser IE7, désolé.

Reply

Sujets relatifs:

Leave a Replay

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