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

Marsh Posté le 14-06-2007 à 12:56:32

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 :

Code :

<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">
<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="javascript: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="javascript: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="javascript: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>
</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

Reply

Marsh Posté le 14-06-2007 à 12:56:32

Reply

Marsh Posté le 14-06-2007 à 15:14:18

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."

Reply

Marsh Posté le 14-06-2007 à 15:26:29

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 :

<style type="text/css" media="screen">
<!--
*{
margin: 0;
padding: 0;
}
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;
...

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

Reply

Marsh Posté le 14-06-2007 à 17:13:38

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."

Reply

Marsh Posté le 14-06-2007 à 22:33:07

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

Reply

Marsh Posté le 15-06-2007 à 10:57:56

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."

Reply

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

Sujets relatifs:

Leave a Replay