ex6s10z Posté(e) le 14 juin 2007 Partager Posté(e) le 14 juin 2007 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) Sous IE (pb de décalage et espacement entre sous rubriques) 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 : <html> <head> <title>anprac</title> <script src="backtothehtml.js" type="text/javascript"></script> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <script type="text/javascript"> <!-- window.onload=montre; function montre(id) { var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';} } if (d) {d.style.display='block';} } //--> </script> <style type="text/css" media="screen"> <!-- body { margin: 0; padding: 0; background: white; font-family: tahoma; font-size: 10px; font-weight: bold; color: #003399; background-color: #CCCCCC; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #menu { position: static; /* placement du menu, à modifier selon vos besoins */ top: 0; left: 0; } #menu { width: 175px; } #menu dt { cursor: pointer; ; height: auto; line-height: 20px; text-align: left; font-weight: bold; border: 0px solid gray; background: #FFF; margin-top: 0px; margin-right: 0; margin-bottom: 0px; margin-left: 0; } #menu dd { border: 0px solid gray; text-align: left; background: #FFF; font-weight: regular; } #menu li { text-align: left; background: #fff; text-indent: 8px; font-size: 9px; font-weight: normal; } #menu li a, #menu dt a { color: #003399; text-decoration: none; display: block; border: 0 none; height: 100%; } #menu li a:hover, #menu dt a:hover { background: #eee; } --> </style> <style type="text/css"> <!-- .style1 {color: #003699} .style3 { color: #006699; font-size: 10px; } .style5 {font-size: 9px; } .style7 {color: #006699; font-size: 10px; } --> </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (anprac.psd) --> <table id="Table_01" width="801" height="636" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td colspan="14"> <img src="images/anprac_01.png" width="800" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> </tr> <tr> <td width="31" height="634" rowspan="11" bgcolor="#CCCCCC"> <img src="images/spacer.gif" width="31" height="634" alt=""></td> <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"> <param name="movie" value="swf/anprac.swf"> <param name="quality" value="high"> <embed src="swf/anprac.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="213" height="36"></embed> </object> <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"> <param name="movie" value="swf/Snotre offre.swf"> <param name="quality" value="high"> <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> </object></td> <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"> <param name="movie" value="swf/cmtsouscrire.swf"> <param name="quality" value="high"> <embed src="swf/cmtsouscrire.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="159" height="36"></embed> </object></td> <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"> <param name="movie" value="swf/espaceadherents.swf"> <param name="quality" value="high"> <embed src="swf/espaceadherents.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="136" height="36"></embed> </object></td> <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"> <param name="movie" value="swf/contact.swf"> <param name="quality" value="high"> <embed src="swf/contact.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="88" height="36"></embed> </object></td> <td width="46" height="634" rowspan="11" bgcolor="#CCCCCC"> <img src="images/spacer.gif" width="46" height="634" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="36" alt=""></td> </tr> <tr> <td colspan="12"> <img src="images/anprac_09.png" width="723" height="13" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="13" alt=""></td> </tr> <tr> <td colspan="3"> <img src="images/anprac_10.png" width="184" height="133" alt=""></td> <td colspan="9"> <img src="images/anprac_11.png" width="539" height="133" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="133" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/anprac_12.png" width="202" height="19" alt=""></td> <td colspan="3" rowspan="3"><img src="images/Tnotreoffre.jpg" width="27" height="203"></td> <td colspan="5" rowspan="2"> <img src="images/anprac_14.png" width="494" height="48" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="19" alt=""></td> </tr> <tr> <td colspan="2" rowspan="2"> <img src="images/anprac_15.png" width="27" height="184" alt=""></td> <th colspan="2" rowspan="2" align="left" valign="top" bgcolor="#FFFFFF" class="style1"> <dl id="menu"> <dt class="style7" onMouseOver="java script:montre('smenu1');">Personnel navigant technique</dt> <dd class="style5" id="smenu1"> <ul> <li><a href="html/pertedelicence.html" target="contenu">Perte de licence</a></li> <li><a href="html/inaptitudetemporairedevol.html" target="contenu">Inaptitude temporaire de vol</a></li> <li><a href="html/arretdetravail.html" target="contenu">Arrêt de travail</a></li> <li><a href="html/deces.html" target="contenu">Décès</a></li> <li><a href="html/fraismedicaux.html" target="contenu">Frais médicaux</a></li> <li><a href="html/protectionjuridique.html" target="contenu">Protection juridique</a></li> <li><a href="html/epargneretraite.html" target="contenu">Epargne - retraite</a></li> </ul> </dd> <dt class="style7" onMouseOver="java script:montre('smenu2');">Personnel navigant commercial</dt> <dd class="style5" id="smenu2"> <ul> <li><a href="html/pertedelicence.html" target="contenu">Perte de licence</a></li> <li><a href="html/inaptitudetemporairedevol.html" target="contenu">Inaptitude temporaire de vol</a></li> <li><a href="html/arretdetravail.html" target="contenu">Arrêt de travail</a></li> <li><a href="html/deces.html" target="contenu">Décès</a></li> <li><a href="html/fraismedicaux.html" target="contenu">Frais médicaux</a></li> <li><a href="html/protectionjuridique.html" target="contenu">Protection juridique</a></li> <li><a href="html/epargneretraite.html" target="contenu">Epargne - retraite</a></li> </ul> </dd> <dt class="style3" onMouseOver="java script:montre('smenu3');">Personnel navigant stagiaire</dt> <dd class="style5" id="smenu3"> <ul> <li><a href="html/stagiaire.html" target="contenu">Stagiaire</a></li> </ul> </dd> </dl> </th> </td> <td> <img src="images/spacer.gif" width="1" height="29" alt=""></td> </tr> <tr> <td colspan="4" rowspan="3"><iframe id="contenu" name="contenu" src="html/blank.html" frameborder="0" align="left" height="350" width="472"></iframe></td> <td rowspan="6"> <img src="images/anprac_18.png" width="22" height="404" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="155" alt=""></td> </tr> <tr> <td rowspan="5"> <img src="images/anprac_19.png" width="19" height="249" alt=""></td> <td colspan="4"> <img src="images/anprac_20.png" width="193" height="108" alt=""></td> <td colspan="2" rowspan="5"> <img src="images/anprac_21.png" width="17" height="249" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="108" alt=""></td> </tr> <tr> <td colspan="4" rowspan="4"> <img src="images/anprac_22.png" width="193" height="141" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="87" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/anprac_23.png" width="472" height="16" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="16" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/anprac_24.png" width="472" height="21" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="21" alt=""></td> </tr> <tr> <td width="472" height="17" colspan="4" bgcolor="#CCCCCC"> <img src="images/spacer.gif" width="472" height="17" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="17" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="31" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="19" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="8" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="157" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="18" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="10" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="16" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="111" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="159" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="136" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="66" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="22" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="46" height="1" alt=""></td> <td></td> </tr> </table> <!-- End ImageReady Slices --> </body> </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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Cubic-Design Posté(e) le 14 juin 2007 Partager Posté(e) le 14 juin 2007 C'est réalisable en full css, sans javascript, mais il faudrait que tu aprennes à faire des sites tableless (vrai intêret du css / xHTML) Lien vers le commentaire Partager sur d’autres sites More sharing options...
Messages recommandés
Archivé
Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.