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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1720156
Raito33
Posté le 18-04-2008 à 23:12:27  profilanswer
 

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:

mood
Publicité
Posté le 18-04-2008 à 23:12:27  profilanswer
 

n°1720172
gatsu35
Blablaté par Harko
Posté le 19-04-2008 à 02:13:41  profilanswer
 

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

n°1720214
Raito33
Posté le 19-04-2008 à 12:12:50  profilanswer
 

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
n°1720241
Aslan117
Posté le 19-04-2008 à 13:53:51  profilanswer
 

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

n°1720304
Raito33
Posté le 19-04-2008 à 17:09:16  profilanswer
 

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 !

n°1722380
Raito33
Posté le 22-04-2008 à 21:36:44  profilanswer
 

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


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

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

 

Sujets relatifs
[MySQL] - Problème aux extrêmes...problème avec une variable
problème de connect avec le SIGNAL itemClicked(item) avec QtMapping NHibernate probleme <composite-id>
problème de connection avec une bdd oracleProblème au niveau d'une chaîne de caractères
liste modifiable probleme[Résolu] Problème de récupération
Problème " recherche dans mes tables "problème d'affichage du format de la date (AAAA-MM-JJ)
Plus de sujets relatifs à : Problème décallage IE par rapport à FF et Opera

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

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