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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème affichage menu déroulant CSS/java sous IE

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème affichage menu déroulant CSS/java sous IE

n°1574854
ex6s10z
Posté le 14-06-2007 à 12:56:32  profilanswer
 

Bonjour,
 
je réalise actuellement un site pour une société d'assurance.
J'ai réalisé un menu déroulant en CSS avec fontions javascript pour les onmouseover etc...
 
Le problème est que le rendu n'est pas du tout le même sous IE et sous FF (firefox). Sous Firefox il n'y a aucun problème, le menu appraît tel que je l'ai créé alors que sous IE l'espacement entre mes sous-menu est bien plus important ce qui implique des décalages dans ma découpe de maquette.
 
Pour illustrer ceci voici 2 screenshots :
 
Sous FF (affichage OK)
http://exis10z.free.fr/socape/htmlpb/FF.jpg
 
Sous IE (pb de décalage et espacement entre sous rubriques)
http://exis10z.free.fr/socape/htmlpb/ie.jpg
 
J'ai cherché un peu sur internet je n'ai pas trouvé d'infos spécifiques à mon problème.
 
Voici  le code de ma page pour vous éclairer :
 

Code :
  1. <html>
  2. <head>
  3. <title>anprac</title>
  4. <script src="backtothehtml.js" type="text/javascript"></script>
  5. <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. <!--
  8. window.onload=montre;
  9. function montre(id) {
  10. var d = document.getElementById(id);
  11. for (var i = 1; i<=10; i++) {
  12.  if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  13. }
  14. if (d) {d.style.display='block';}
  15. }
  16. //-->
  17. </script>
  18. <style type="text/css" media="screen">
  19. <!--
  20. body {
  21. margin: 0;
  22. padding: 0;
  23. background: white;
  24. font-family: tahoma;
  25. font-size: 10px;
  26. font-weight: bold;
  27. color: #003399;
  28. background-color: #CCCCCC;
  29. }
  30. dl, dt, dd, ul, li {
  31. margin: 0;
  32. padding: 0;
  33. list-style-type: none;
  34. }
  35. #menu {
  36. position: static; /* placement du menu, à modifier selon vos besoins */
  37. top: 0;
  38. left: 0;
  39. }
  40. #menu {
  41. width: 175px;
  42. }
  43. #menu dt {
  44. cursor: pointer;
  45. ;
  46. height: auto;
  47. line-height: 20px;
  48. text-align: left;
  49. font-weight: bold;
  50. border: 0px solid gray;
  51. background: #FFF;
  52. margin-top: 0px;
  53. margin-right: 0;
  54. margin-bottom: 0px;
  55. margin-left: 0;
  56. }
  57. #menu dd {
  58. border: 0px solid gray;
  59. text-align: left;
  60. background: #FFF;
  61. font-weight: regular;
  62. }
  63. #menu li {
  64. text-align: left;
  65. background: #fff;
  66. text-indent: 8px;
  67. font-size: 9px;
  68. font-weight: normal;
  69. }
  70. #menu li a, #menu dt a {
  71. color: #003399;
  72. text-decoration: none;
  73. display: block;
  74. border: 0 none;
  75. height: 100%;
  76. }
  77. #menu li a:hover, #menu dt a:hover {
  78. background: #eee;
  79. }
  80. -->
  81. </style>
  82. <style type="text/css">
  83. <!--
  84. .style1 {color: #003699}
  85. .style3 {
  86. color: #006699;
  87. font-size: 10px;
  88. }
  89. .style5 {font-size: 9px; }
  90. .style7 {color: #006699; font-size: 10px; }
  91. -->
  92. </style>
  93. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
  94. <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  95. <!-- ImageReady Slices (anprac.psd) -->
  96. <table id="Table_01" width="801" height="636" border="0" cellpadding="0" cellspacing="0" align="center">
  97. <tr>
  98.  <td colspan="14">
  99.   <img src="images/anprac_01.png" width="800" height="1" alt=""></td>
  100.  <td>
  101.   <img src="images/spacer.gif" width="1" height="1" alt=""></td>
  102. </tr>
  103. <tr>
  104.  <td width="31" height="634" rowspan="11" bgcolor="#CCCCCC">
  105.   <img src="images/spacer.gif" width="31" height="634" alt=""></td>
  106.  <td colspan="6"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="213" height="36">
  107.           <param name="movie" value="swf/anprac.swf">
  108.           <param name="quality" value="high">
  109.           <embed src="swf/anprac.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="213" height="36"></embed>
  110.    </object>
  111.   <td colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="127" height="36">
  112.         <param name="movie" value="swf/Snotre offre.swf">
  113.         <param name="quality" value="high">
  114.         <embed src="swf/Snotre offre.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="127" height="36"></embed>
  115.       </object></td>
  116.  <td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="159" height="36">
  117.           <param name="movie" value="swf/cmtsouscrire.swf">
  118.           <param name="quality" value="high">
  119.           <embed src="swf/cmtsouscrire.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="159" height="36"></embed>
  120.     </object></td>
  121.  <td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="136" height="36">
  122.           <param name="movie" value="swf/espaceadherents.swf">
  123.           <param name="quality" value="high">
  124.           <embed src="swf/espaceadherents.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="136" height="36"></embed>
  125.     </object></td>
  126.  <td colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="88" height="36">
  127.           <param name="movie" value="swf/contact.swf">
  128.           <param name="quality" value="high">
  129.           <embed src="swf/contact.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="88" height="36"></embed>
  130.     </object></td>
  131.  <td width="46" height="634" rowspan="11" bgcolor="#CCCCCC">
  132.   <img src="images/spacer.gif" width="46" height="634" alt=""></td>
  133.  <td>
  134.   <img src="images/spacer.gif" width="1" height="36" alt=""></td>
  135. </tr>
  136. <tr>
  137.  <td colspan="12">
  138.   <img src="images/anprac_09.png" width="723" height="13" alt=""></td>
  139.  <td>
  140.   <img src="images/spacer.gif" width="1" height="13" alt=""></td>
  141. </tr>
  142. <tr>
  143.  <td colspan="3">
  144.   <img src="images/anprac_10.png" width="184" height="133" alt=""></td>
  145.  <td colspan="9">
  146.   <img src="images/anprac_11.png" width="539" height="133" alt=""></td>
  147.  <td>
  148.   <img src="images/spacer.gif" width="1" height="133" alt=""></td>
  149. </tr>
  150. <tr>
  151.  <td colspan="4">
  152.   <img src="images/anprac_12.png" width="202" height="19" alt=""></td>
  153.  <td colspan="3" rowspan="3"><img src="images/Tnotreoffre.jpg" width="27" height="203"></td>
  154. <td colspan="5" rowspan="2">
  155.   <img src="images/anprac_14.png" width="494" height="48" alt=""></td>
  156.  <td>
  157.   <img src="images/spacer.gif" width="1" height="19" alt=""></td>
  158. </tr>
  159. <tr>
  160.  <td colspan="2" rowspan="2">
  161.   <img src="images/anprac_15.png" width="27" height="184" alt=""></td>
  162.  <th colspan="2" rowspan="2" align="left" valign="top" bgcolor="#FFFFFF" class="style1">
  163.         <dl id="menu">
  164.         <dt class="style7" onMouseOver="javascript:montre('smenu1');">Personnel navigant technique</dt>
  165.    <dd class="style5" id="smenu1">
  166.    <ul>
  167.     <li><a href="html/pertedelicence.html" target="contenu">Perte de licence</a></li>
  168.      <li><a href="html/inaptitudetemporairedevol.html" target="contenu">Inaptitude temporaire de vol</a></li>
  169.      <li><a href="html/arretdetravail.html" target="contenu">Arr&ecirc;t de travail</a></li>
  170.                   <li><a href="html/deces.html" target="contenu">D&eacute;c&egrave;s</a></li>
  171.                   <li><a href="html/fraismedicaux.html" target="contenu">Frais m&eacute;dicaux</a></li>
  172.                   <li><a href="html/protectionjuridique.html" target="contenu">Protection juridique</a></li>
  173.                   <li><a href="html/epargneretraite.html" target="contenu">Epargne - retraite</a></li>
  174.   </ul>
  175.    </dd>
  176.            
  177.  <dt class="style7" onMouseOver="javascript:montre('smenu2');">Personnel navigant commercial</dt>
  178.    <dd class="style5" id="smenu2">
  179.    <ul>
  180.     <li><a href="html/pertedelicence.html" target="contenu">Perte de licence</a></li>
  181.      <li><a href="html/inaptitudetemporairedevol.html" target="contenu">Inaptitude temporaire de vol</a></li>
  182.      <li><a href="html/arretdetravail.html" target="contenu">Arr&ecirc;t de travail</a></li>
  183.                   <li><a href="html/deces.html" target="contenu">D&eacute;c&egrave;s</a></li>
  184.                   <li><a href="html/fraismedicaux.html" target="contenu">Frais m&eacute;dicaux</a></li>
  185.                   <li><a href="html/protectionjuridique.html" target="contenu">Protection juridique</a></li>
  186.                   <li><a href="html/epargneretraite.html" target="contenu">Epargne - retraite</a></li>
  187.   </ul>
  188.    </dd>
  189.          
  190.            <dt class="style3" onMouseOver="javascript:montre('smenu3');">Personnel navigant stagiaire</dt>
  191.    <dd class="style5" id="smenu3">
  192.    <ul>
  193.     <li><a href="html/stagiaire.html" target="contenu">Stagiaire</a></li>
  194.   </ul>
  195.    </dd>
  196. </dl>
  197. </th>
  198.      
  199.        </td>
  200.   <td>
  201.   <img src="images/spacer.gif" width="1" height="29" alt=""></td>
  202. </tr>
  203. <tr>
  204.  <td colspan="4" rowspan="3"><iframe id="contenu" name="contenu" src="html/blank.html" frameborder="0" align="left" height="350" width="472"></iframe></td>
  205.   <td rowspan="6">
  206.   <img src="images/anprac_18.png" width="22" height="404" alt=""></td>
  207.  <td>
  208.   <img src="images/spacer.gif" width="1" height="155" alt=""></td>
  209. </tr>
  210. <tr>
  211.  <td rowspan="5">
  212.   <img src="images/anprac_19.png" width="19" height="249" alt=""></td>
  213.  <td colspan="4">
  214.   <img src="images/anprac_20.png" width="193" height="108" alt=""></td>
  215.  <td colspan="2" rowspan="5">
  216.   <img src="images/anprac_21.png" width="17" height="249" alt=""></td>
  217.  <td>
  218.   <img src="images/spacer.gif" width="1" height="108" alt=""></td>
  219. </tr>
  220. <tr>
  221.  <td colspan="4" rowspan="4">
  222.   <img src="images/anprac_22.png" width="193" height="141" alt=""></td>
  223.  <td>
  224.   <img src="images/spacer.gif" width="1" height="87" alt=""></td>
  225. </tr>
  226. <tr>
  227.  <td colspan="4">
  228.   <img src="images/anprac_23.png" width="472" height="16" alt=""></td>
  229.  <td>
  230.   <img src="images/spacer.gif" width="1" height="16" alt=""></td>
  231. </tr>
  232. <tr>
  233.  <td colspan="4">
  234.   <img src="images/anprac_24.png" width="472" height="21" alt=""></td>
  235.  <td>
  236.   <img src="images/spacer.gif" width="1" height="21" alt=""></td>
  237. </tr>
  238. <tr>
  239.  <td width="472" height="17" colspan="4" bgcolor="#CCCCCC">
  240.   <img src="images/spacer.gif" width="472" height="17" alt=""></td>
  241.  <td>
  242.   <img src="images/spacer.gif" width="1" height="17" alt=""></td>
  243. </tr>
  244. <tr>
  245.  <td>
  246.   <img src="images/spacer.gif" width="31" height="1" alt=""></td>
  247.  <td>
  248.   <img src="images/spacer.gif" width="19" height="1" alt=""></td>
  249.  <td>
  250.   <img src="images/spacer.gif" width="8" height="1" alt=""></td>
  251.  <td>
  252.   <img src="images/spacer.gif" width="157" height="1" alt=""></td>
  253.  <td>
  254.   <img src="images/spacer.gif" width="18" height="1" alt=""></td>
  255.  <td>
  256.   <img src="images/spacer.gif" width="10" height="1" alt=""></td>
  257.  <td>
  258.   <img src="images/spacer.gif" width="1" height="1" alt=""></td>
  259.  <td>
  260.   <img src="images/spacer.gif" width="16" height="1" alt=""></td>
  261.  <td>
  262.   <img src="images/spacer.gif" width="111" height="1" alt=""></td>
  263.  <td>
  264.   <img src="images/spacer.gif" width="159" height="1" alt=""></td>
  265.  <td>
  266.   <img src="images/spacer.gif" width="136" height="1" alt=""></td>
  267.  <td>
  268.   <img src="images/spacer.gif" width="66" height="1" alt=""></td>
  269.  <td>
  270.   <img src="images/spacer.gif" width="22" height="1" alt=""></td>
  271.  <td>
  272.   <img src="images/spacer.gif" width="46" height="1" alt=""></td>
  273.  <td></td>
  274. </tr>
  275. </table>
  276. <!-- End ImageReady Slices -->
  277. </body>
  278. </html>

*
 
Un aperçu en ligne est disponible à l'adresse suivante si vous souhaitez tester sur votre poste : http://exis10z.free.fr/socape/notreoffre.html
 
Je vous remercie d'avance pour votre aide.
Quentin

mood
Publicité
Posté le 14-06-2007 à 12:56:32  profilanswer
 

n°1574947
AlphaZone
Posté le 14-06-2007 à 15:14:18  profilanswer
 

Regarde du côté des margin et padding.
 
Et si t'as le temps regarde du côté : http://www.alsacreations.com pour la mise en forme.


---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
n°1574957
ex6s10z
Posté le 14-06-2007 à 15:26:29  profilanswer
 

merci pour le conseil, je venais de tester à l'instant en insérant margin: 0 et padding:0 dans le code mais pas de changement...
extrait du code  

Code :
  1. <style type="text/css" media="screen">
  2. <!--
  3. *{
  4. margin: 0;
  5. padding: 0;
  6. }
  7. body {
  8. margin: 0;
  9. padding: 0;
  10. background: white;
  11. font-family: tahoma;
  12. font-size: 10px;
  13. font-weight: bold;
  14. color: #003399;
  15. background-color: #CCCCCC;
  16. }
  17. dl, dt, dd, ul, li {
  18. margin: 0;
  19. padding: 0;
  20. ...


 
en ce qui concerne alsacreations c'est d'ailleurs de ce site que j'ai récupéré le code insérer dans ma page pour le menu...


Message édité par ex6s10z le 14-06-2007 à 15:32:39
n°1575048
AlphaZone
Posté le 14-06-2007 à 17:13:38  profilanswer
 

J'ai vérifié sous IE et FF, l'affichage est correct. Fais CTRL+F5 pour vider ton cache.


---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
n°1575212
ex6s10z
Posté le 14-06-2007 à 22:33:07  profilanswer
 

intrigante comme réponse, merci pour le conseil mais ca ne fonctionne toujours pas. J'ai effectué le test sur 3 postes... avec ie6 et ie7 mm en vidant le cache j'ai toujours cet espacement plus important sous IE qui déforme mon template.
 
Tu es sous quelle version de ie?
Tu n'as vraiment pas de décalage lors du déroulement du sous menu dans la partie "Notre Offre"?
 
Intrigant...
Mais je suis sur qu'on trouvera une réponse à tout ca!
Merci ;)

n°1575380
AlphaZone
Posté le 15-06-2007 à 10:57:56  profilanswer
 

J'ai re-revérifié. Je ne constate rien d'anormale quant à la visualisation.

 

J'ai FF 2.0.0.4 et IE 6.0

 

EDIT : LOL, j'avais pas testé le menu. Effectivement, j'ai bien un décallage. As-tu essayé de mettre tes balises <a></a> avec margin et padding à 0 ?


Message édité par AlphaZone le 15-06-2007 à 11:01:58

---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."

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

  Problème affichage menu déroulant CSS/java sous IE

 

Sujets relatifs
Charset encoding et Java 1.3Problème de keyListener en SWT
Probleme affichage images avec script PHPcompteur de telechargement mal placé: problème code html ?
Problème de Thread qui ne fonctionne pasJNI - Problème de librairies
Petit soucis de CSS je pense ...Problème de destruction dynamique d'Applet
Problème URL REWRITING 
Plus de sujets relatifs à : Problème affichage menu déroulant CSS/java sous IE


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