Problème décallage IE par rapport à FF et Opera

Problème décallage IE par rapport à FF et Opera - HTML/CSS - Programmation

Marsh Posté le 18-04-2008 à 23:12:27    

Bonjour,
 
Voilà, je comprends pas, j'ai un décallage sous IE que je n'ai pas sous Opera ou Firefox.
Il s'agit d'un sous menu déroulant, qui se décale sur la gauche à l'ouverture sous IE (voir ici
 
Le problème vient de cette partie du code :
 

Code :
  1. #menu2 ul{
  2. width : 129px ;
  3. height : 26px;
  4. margin : 0px 0 0 -40px;
  5. list-style: none;
  6. font-weight: normal;
  7. text-transform : capitalize;
  8. }


 
Voilà, si vous pouviez m'aider pour qu'il n'y ai pas de décallage dans chacun des navigateurs, ça serait sympa...
Merci d'avance :jap:
 
:hello:

Reply

Marsh Posté le 18-04-2008 à 23:12:27   

Reply

Marsh Posté le 19-04-2008 à 02:13:41    

avec juste ce bout de code, tu peux te fourrer le doigt dans l'oeil pour qu'on te dise ce qui cloche. Ya rien ici qui pourrait nous dire ce qui cloche. Mais strictement rien.
 
poste le code HTML + CSS ENTIER ENTIER ENTIER ENTIER ENTIER ENTIER ENTIER
et le mieux serait d'avoir la page en question en ligne

Reply

Marsh Posté le 19-04-2008 à 12:12:50    

Ben, je sais pas, j'y connais que dalle pour les codes... :/
J'ai juste vu qu'en changeant le -40 en 0, yavait plus le décallage horizontal sous IE, mais qu'il apparaissant sous Opera.
 
Le CSS :
 

Code :
  1. body {
  2. margin : 0 ;
  3. padding : 0 ;
  4. text-align : center;
  5. background : #4c4c4c ;
  6. font-family : arial;
  7. font-size : 11px;
  8. color : #373737}
  10. #content {
  11. position : relative;
  12. width : 1175px;
  13. background : transparent;
  14. margin-left : auto;
  15. margin-right : auto;
  16. text-align : center;
  17. }
  19. #haut {
  20. width : 100%;
  21. height : 250px ;
  22. background : url(images_site/site3.jpg) no-repeat;
  23. margin-left : auto;
  24. margin-right : auto;
  25. text-align : left; }
  27. #centre {
  28. width : 100%;
  29. background : url(images_site/centre.jpg);
  30. margin-left : auto;
  31. margin-right : auto;
  32. padding-bottom :14px;
  33. text-align : left }
  35. #bas{
  36. width : 100%;
  37. height : 180px ;
  38. background : transparent url(images_site/bas.jpg);
  39. margin-left : auto;
  40. margin-right : auto }
  43.   #bas p{
  44. padding : 95px 500px 0 0; margin : 0 ; color : #000 ; }
  47. #bas a{
  48. text-decoration : none ;
  49. }
  52.   #bas a:hover{
  53. text-decoration : underline ;
  54. }
  56. #menu {
  57. position : absolute ;
  58. left : 12px ;
  59. top : 95px ;
  60. text-align : left;
  61. background : transparent top left no-repeat;
  62. }
  65. #menu ul{
  66. width : 202px ;
  67. height : 275px;
  68. list-style: none;
  69. margin : -55px 0 0 0;
  70. padding : 0px 0 0 40px;
  71. text-transform : uppercase;
  72. }
  74. #menu li{
  75. margin :0;
  76. padding :  0;
  77. list-style: none;
  78. line-height : 30px;
  79. text-align : left;
  80. text-indent : 5px  }
  82. #menu li a {
  83. background : transparent url(images_site/bg_menu.gif) bottom no-repeat;
  84. width: 150px;
  85. display: block;
  86. height : 30px;
  87. text-decoration: none;
  88. margin :  0;
  89. padding : 0;
  90. list-style: none;
  91. color  : #232323 }
  94. #menu li a:hover {
  95. background : transparent url(images_site/bg_menu_ov.gif) bottom no-repeat;
  96. height : 30px;
  97. }
  100. #menu2 {
  101. position: relative;
  102. z-index:100;
  103. width: 100%; /* correction pour Opera */
  104. }
  105. #menu2 dl {
  106. float: left;
  107. width: 128px;
  108. }
  109. #menu2 dt {
  110. cursor: pointer;
  111. text-align: center;
  112. line-height: 27px;
  113. font-weight: bold;
  114. background-image:url("images_site/av_001.jpg" );
  115. margin: 0px;
  116. display: block;
  117. }
  118. #menu2 dd {
  119. position: absolute;
  120. width: 128px;
  121. display: none;
  122. border: 0px solid gray;
  123. }
  125. #menu2 ul{
  126. width : 129px ;
  127. height : 26px;
  128. margin : 0px 0 0 -40px;
  129. list-style: none;
  130. font-weight: normal;
  131. text-transform : capitalize;
  132. }
  134. #menu2 li {
  135. text-align: left;
  136. padding-left: 10px;
  137. padding-top: 2px;
  138. padding-bottom: 2px;
  139. background-color : #3E3C3D;
  140. border-bottom: 1px solid #555555;
  141. border-left: 1px solid #555555;
  142. border-right: 1px solid #555555;
  143. }
  144. #menu2 li a, #menu2 dt a {
  145. color: #9a9a9a;
  146. text-decoration: none;
  147. display: block;
  148. height: 100%;
  149. border: 0 none;
  150. }
  151. #menu2 li a:hover, #menu2 li a:focus, #menu2 dt a:hover, #menu2 dt a:focus {
  152. background:#141414;
  153. }
  156. dl.gallery
  157. {
  159. background : #797877;
  160. width: 225px;
  161. text-align: left;
  162. float: left;
  163. margin : 0 0 0 0;
  164. padding : 0;
  165. color : #fff;
  166. }
  168. .gallery dt { }
  170. .gallery dt img
  171. {
  173. width: 225px;
  174. height: 25px;
  175. border : none;
  177. }
  180. .gallery dd
  181. {
  182. font-weight: normal;
  183. text-transform : normal;
  184. margin: 0;
  185. padding: 13px 0 -5px 0;
  186. background : #797877;
  187. color : #fff
  188. }
  191. .corect_bug_galery {
  192. width: 100%;
  193. height: 40px;
  194. background : #252525 url(images_site/bgbugmenu.jpg) repeat-x bottom;
  196. }
  200. #bloc_centre{
  201. width : 900px;
  202. padding-bottom : 10px;
  203. background : #252525;
  204. margin-left : 140px !important;
  205. margin-left : 115px ;
  206. text-align : left;}
  211. h1 {margin : 0 0 0 30px ; padding : 20px 0 0 0 ; font-size : 25px ; clear : left }
  214. p {margin : 0  ; padding : 0}
  215. div.pousse {margin-left : 5px}
  216. .float_left {float : left}
  217. .spacer {clear : both ; height : 13px}
  218. .apropos {width : 95% ; padding : 5px 0 0 0 ; margin : 0 0 0 20px ; }
  220. a {color : #ffa500}
  221. a:hover {text-decoration : none}
  228. .content_img {
  229. background-color: #fff;
  230. width: 141px ;
  231. text-align: left;
  232. padding: 10px 10px  0 12px ;
  233. float: left;}
  235. .content_img p{
  236. margin : 0; padding : 0}
  240. .ref {float : left}
  241. .tarifs  {float : right  ; margin: 0; padding : 0}
  242. .name {font-weight : bold ; clear : both}
  246. .pubdownload {
  247. margin : 20px 0 0 20px;
  250. }
  252. .pubdownload img{
  253. float : left ; margin-right : 10px
  255. }
  257. .raisons {
  258. float : left ; width : 250px ;  height : 40px
  260. }
  262.   h2 {margin : 0  ; padding :  0 ; font-size : 16px ; clear : left ; color : #373737 }


 
Le Html :  
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
  3. lang="fr">
  4. <head>
  5.   <title>DiabloL</title>
  6.   <meta http-equiv="Content-Type"
  7. content="text/html; charset=iso-8859-1" />
  8.   <meta name="Description" content="kit graphique" />
  9.   <meta name="Keywords" content="kit graphique" />
  10.   <link rel="stylesheet" type="text/css"
  11. href="lesite.css" />
  12.   <script type="text/javascript">
  13. <!--
  14. window.onload=montre;
  15. function montre(id) {
  16. var d = document.getElementById(id);
  17. for (var i = 1; i<=10; i++) {
  18. if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  19. }
  20. if (d) {d.style.display='block';}
  21. }
  22. //-->
  23.   </script>
  24. </head>
  25. <body>
  26. <div id="content">
  27. <div id="haut">
  28. <div class="img_haut"> <object
  29. type="application/x-shockwave-flash" data="images_site/expo.swf"
  30. height="145" width="554"> <param name="movie"
  31. value="images_site/expo.swf" /> <param name="wmode"
  32. value="transparent" /> </object> </div>
  33. </div>
  34. <div id="menu">
  35. <ul>
  36.   <li> <a href="index.html">Home</a> </li>
  37.   <li> <a href="episodes.html">Les news</a> </li>
  38.   <li> <a href="enregistrements.html">Les mp3</a>
  39.   </li>
  40.   <li> <a href="complements.html">Les textes</a>
  41.   </li>
  42.   <li> <a href="lienscontact.html">contact</a>
  43.   </li>
  44. </ul>
  45. </div>
  46. <div id="centre">
  47. <div id="bloc_centre">
  48. <div style="font-family: Arial;" id="menu2"
  49. class="corect_bug_galery">
  50. <dl style="color: rgb(157, 157, 157);" class="gallery">
  51.   <dt style="height: 26px;" onmouseover="javascript:montre();">
  52.     <a href="" title="Retour a l'accueil">Accueil</a>
  53.   </dt>
  54. </dl>
  55. <dl style="color: rgb(157, 157, 157);" class="gallery">
  56.   <dt style="height: 26px;" onmouseover="javascript:montre();">
  57.     <a href="" title="Retour a l'accueil">News</a>
  58.   </dt>
  59. </dl>
  60. <dl style="color: rgb(157, 157, 157);" class="gallery">
  61.   <dt style="height: 26px;" onmouseover="montre('smenu1')"
  62. onmouseout="montre()">
  63.     <a href="" title="Retour a l'accueil">Episodes</a>
  64.   </dt>
  65.   <dd id="smenu1" onmouseover="javascript:montre('smenu1');"
  66. onmouseout="javascript:montre('');">
  67.     <ul>
  68.       <li> <a href="#">Le Synopsis</a> </li>
  69.       <li> <a href="#">L'Audio</a> </li>
  70.       <li> <a href="#">Les Textes</a> </li>
  71.       <li> <a href="#">Les Résumés</a> </li>
  72.     </ul>
  73.   </dd>
  74. </dl>
  75. <dl style="color: rgb(157, 157, 157);" class="gallery">
  76.   <dt style="height: 26px;" onmouseover="montre('smenu2')"
  77. onmouseout="montre()">
  78.     <a href="" title="Retour a l'accueil">Enregistrements</a></dt>
  79.   <dd id="smenu2" onmouseover="javascript:montre('smenu2');"
  80. onmouseout="javascript:montre('');">
  81.     <ul>
  82.       <li> <a href="#">Les Voix</a> </li>
  83.       <li> <a href="#">Le Matériel</a> </li>
  84.       <li> <a href="#">Les Musiques</a> </li>
  85.       <li> <a href="#">Les Tutoriaux</a> </li>
  86.     </ul>
  87.   </dd>
  88. </dl>
  89. <dl style="color: rgb(157, 157, 157);" class="gallery">
  90.   <dt style="height: 26px;" onmouseover="montre('smenu3')"
  91. onmouseout="montre()">
  92.     <a href="" title="Retour a l'accueil">Compléments</a></dt>
  93.   <dd id="smenu3" onmouseover="javascript:montre('smenu3');"
  94. onmouseout="javascript:montre('');">
  95.     <ul>
  96.       <li> <a href="#">Fiches Persos</a> </li>
  97.       <li> <a href="#">Jaquette</a> </li>
  98.       <li> <a href="#">Carte</a> </li>
  99.     </ul>
  100.   </dd>
  101. </dl>
  102. <dl style="color: rgb(157, 157, 157);" class="gallery">
  103.   <dt style="height: 26px;" onmouseover="montre('smenu4')"
  104. onmouseout="montre()">
  105.     <a href="" title="Retour a l'accueil">S'exprimer</a></dt>
  106.   <dd id="smenu4" onmouseover="javascript:montre('smenu4');"
  107. onmouseout="javascript:montre('');">
  108.     <ul>
  109.       <li> <a href="#">Me Contacter</a> </li>
  110.       <li> <a href="#">Livre d'Alu</a> </li>
  111.     </ul>
  112.   </dd>
  113. </dl>
  114. <dl style="color: rgb(157, 157, 157);" class="gallery">
  115.   <dt style="height: 26px;" onmouseover="montre('smenu5')"
  116. onmouseout="montre()">
  117.     <a href="" title="Retour a l'accueil">Liens</a></dt>
  118.   <dd id="smenu5" onmouseover="javascript:montre('smenu5');"
  119. onmouseout="javascript:montre('');">
  120.     <ul>
  121.       <li> <a href="#">Naheulbeuk</a> </li>
  122.       <li> <a href="#">Reflets d'Acide</a> </li>
  123.       <li> <a href="#">IIIè légion</a> </li>
  124.       <li> <a href="#">Netophonix</a> </li>
  125.       <li> <a href="#">Sagacytée</a> </li>
  126.     </ul>
  127.   </dd>
  128. </dl>
  129. </div>
  130. <h1 style="color: rgb(153, 153, 153); text-align: center;"><br />
  131. </h1>
  132. <h1 style="color: rgb(153, 153, 153); text-align: center;"><br />
  133. </h1>
  134. <br />
  135. <br />
  136. <br />
  137. <br />
  138. <br />
  139. <br />
  140. <h1 style="color: rgb(153, 153, 153); text-align: center;">[En
  141. Contruction]</h1>
  142. <br />
  143. <br />
  144. <br />
  145. <br />
  146. <br />
  147. <br />
  148. <br />
  149. <br />
  150. <br />
  151. <br />
  152. <br />
  153. <br />
  154. <br />
  155. <p class="apropos"> </p>
  156. </div>
  157. </div>
  158. <div id="bas">
  159. <p>©&nbsp;N20 pour toujours Bwaha - DiabloL - 2038. Le Chaos.</p>
  160. <p> <span style="text-decoration: underline;"> </span></p>
  161. </div>
  162. </div>
  163. </body>
  164. </html>


 
La page en question ici
 
Merci :jap:


Message édité par Raito33 le 19-04-2008 à 17:09:58
Reply

Marsh Posté le 19-04-2008 à 13:53:51    

Met des cadres en css de 2px pour délimité les zones provisoirement, tu comprendra très vite le problème je pense.

Reply

Marsh Posté le 19-04-2008 à 17:09:16    

D'accord, je vais essayer ça.
 
Par comprendre, tu sous entends que je tilterai de suite si une autre partie doit être modifié ou alors, ça ne posera plus de problèmes ? ^^'
 
Parce que je ne pige pas grand chose à la programmation malheureusement :/
 
Merci en tout cas, je vais essayer ça de suite !

Reply

Marsh Posté le 22-04-2008 à 21:36:44    

J'ai pas vu de réels changements en fait, et encore moins compris (je connais vraiment quasi rien à la prog, je préfère le préciser...)
 
Ceci dit, je me suis ptet' planter d'endroit... :/

Reply

Sujets relatifs:

Leave a Replay

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