28173 sujets

CSS et mise en forme, CSS3

Menu déroulant CSS, problème d'affichage sous IE.

Bonjour,

je réalise actuellement un site pour une société d'assurance.
J'ai inéserer 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 :

<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="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&ecirc;t de travail</a></li>
                  <li><a href="html/deces.html" target="contenu">D&eacute;c&egrave;s</a></li>
                  <li><a href="html/fraismedicaux.html" target="contenu">Frais m&eacute;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&ecirc;t de travail</a></li>
                  <li><a href="html/deces.html" target="contenu">D&eacute;c&egrave;s</a></li>
                  <li><a href="html/fraismedicaux.html" target="contenu">Frais m&eacute;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>
<!-- End ImageReady Slices -->
</body>
</html>
*

Un aperçu en ligne est disponible à l'adresse suivante si vous souhaitez tester sur votre poste : Smiley url http://exis10z.free.fr/socape/notreoffre.html[/url]

Je vous remercie d'avance pour votre aide.
Quentin
Je n'ai pas vu de hauteur sur ton tableau. Il me semble me souvenir que j'avais parfois des problèmes quand je ne spécifiait pas de taille.

Rude

PS : si tu as bien spécifié une taille et que je ne l'ai pas vu ... Alors milles excuses
Sujet clos
Aller à