[RESOLU]Probleme avec IE :decalage de menu

Bonjour,

J'ai mis en place le menu horizontal proposé par Alsacréations et trouvé ici.

Tout semble bien se passer sous Firefox 2.004.
Avec IE 7, lorsque je survole le dernier item du menu(à droite), le bloc de gauche (en rose) se décale complètement.

Lorsque je supprime ce dernier item, tout se passe parfaitement bien.

Peut etre ai-je un problème de positionnement ?
Peut etre voyez-vous autre chose ?

Merci de tout élairage.
Modifié par gaelle (19 Sep 2007 - 11:29)

Bonjour,
Commences par passer tes DD en position:absolute.
Tu as un autre problème dû à la présence d'un élément fenêtré (<object>) qui
passe sur le premier sous-menu. Pour corriger ça, voir ce post
Modifié par Hermann (18 Sep 2007 - 18:55)

Bonjour,

J'ai mis les dd en position: absolute, mais apparemment rien ne change :


D'autres pistes ?

Pour le menu qui passe en-dessous de l'object, je m'y attarderai dans un second temps, merci pour le post qui donne une piste à suivre.

Merci de tout conseil.
Modifié par gaelle (19 Sep 2007 - 11:30)

Salut,

Peux-tu joindre a ton post tes fichiers css et php ?

Merci.

Avec plaisir !

CSS du menu :

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
	}
	
#menu {
position: absolute;
width : 800px;
top: 170px;
left: 0px;
z-index: 100; 
border-bottom: 1px solid gray;
margin: 0;
padding: 0;
display: block;
	}

#menu dl {   
float: left;
width: 16.66%;
background:#ff7f50 ; 
	}

#menu dt {   
text-align: center;
vertical-align: middle;
font-weight: bold;
margin: 1px;
padding-top: 8px;
height: 3em;
border: 1px solid #C0C0C0;
	}

#menu dd { 
display: none;
border: 1px solid #D4D4D4;
position: absolute;
	}
	
#menu li { 
text-align: left;
padding-left: 5px;
background: #FFFFFF;
padding-bottom: 5px;
background: #D8BFD8;
	}
	
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
	}
		
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #E6E6FA;
	}

Html du menu

 
<div id="menu">
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Ressources en santé mentale</dt>

		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="basedoc.php3">Base SantéPsy</a></li>
				<li><a href="article.php3?id_article=691">Thesaurus SantéPsy</a></li>
				<li><a href="rubrique.php3?id_rubrique=225">Archives hospitalières</a></li>
				<li><a href="rubrique.php3?id_rubrique=14">Colloques, congrès et séminaires</a></li>
				<li><a href="rubrique.php3?id_rubrique=93">Sitothèque</a></li>
				<li><a href="rubrique.php3?id_rubrique=">Actus des blogs</a></li>
				<li><a href="rubrique.php3?id_rubrique=193">Revues en santé mentale</a></li>
				<li><a href="rubrique.php3?id_rubrique=221">Bibliographies</a></li>
			</ul>
		</dd>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu2');">Métiers de l'information</dt>

		<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="rubrique.php3?id_rubrique=26">Formations du GIP</a></li>
				<li><a href="rubrique.php3?id_rubrique=">Associations professionnelles</a></li>
				<li><a href="rubrique.php3?id_rubrique=">Organismes de formation</a></li>
				<li><a href="rubrique.php3?id_rubrique=178">Statuts</a></li>
				<li><a href="article.php3?id_article=167">Réseaux documentaires</a></li>
				<li><a href="article.php3?id_article=168">Listes de diffusion</a></li>
				<li><a href="rubrique.php3?id_rubrique=">Comptes-rendus de journées d'étude</a></li>
			</ul>
		</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Nos publications</dt>

			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="article.php3?id_article=">Thesaurus SantéPsy</a></li>
				<li><a href="article.php3?id_article=">Un thesaurus ?</a></li>
				<li><a href="article.php3?id_article=">Guide des archives hospitalières</a></li>
				<li><a href="article.php3?id_article=">Résultat d'enquête des archives</a></li>
				<li><a href="article.php3?id_article=">Bibliographies</a></li>
				<li><a href="article.php3?id_article=">Droit de l'information</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Nos journées d'études</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="article.php3?id_article=">Traitement de l'information et documentation</a></li>
				<li><a href="article.php3?id_article=">Amélioration de la qualité dans les établissements hospitaliers</a></li>
				<li><a href="article.php3?id_article=">Blogs et RSS</a></li>
				<li><a href="article.php3?id_article=">Validation des Acquis par l'Expérience</a></li>
				<li><a href="article.php3?id_article=">GFII</a></li>
				<li><a href="article.php3?id_article=">Web invisible</a></li>
				<li><a href="article.php3?id_article=">Droit de l'information</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu5');">GIP Ascodocpsy</dt>
			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="article.php3?id_article=">Qui sommes-nous ?</a></li>
				<li><a href="rubrique.php3?id_rubrique=80">Groupes de travail</a></li>
				<li><a href="article.php3?id_article=129">Agenda du GIP</a></li>
				<li><a href="article.php3?id_article=10">Membres du GIP</a></li>
				<li><a href="article.php3?id_article=696">Partenaires</a></li>
				<li><a href="article.php3?id_article=224">Francophonie et coopération</a></li>
				<li><a href="rubrique.php3?id_rubrique=6">Adhérer</a></li>

			</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu6');">Accès adhérent</dt>
			<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="rubrique.php3?id_rubrique=12">Comptes-rendus des groupes de travail</a></li>
				<li><a href="rubrique.php3?id_rubrique=27">Dépouillement Partagé</a></li>
				<li><a href="rubrique.php3?id_rubrique=205">Outils documentaires</a></li>
				<li><a href="rubrique.php3?id_rubrique=24">Bulletin du GIP</li>
			</ul>

			</dd>
	</dl>
</div>

La CSS de la page parce que peut-être que l'erreur vient de là !

BODY {
	padding-right: 0px; 
	padding-left: 0px; 
	padding-top: 0px; 
	padding-bottom: 0px; 
	margin: 0px; 
	background-color: #E4E4E4;	
	font: 11px/15px Tahoma, Verdana, Arial, Helvetica, sans-serif; 	
	text-align: left;
	}

#principal {
	position: relative;
	background-color: #FFFFFF;
	border-top: #DADADA 6px solid;
	border-right: #DADADA 6px solid; 
	border-left: #D4D4D4 6px solid;
	border-bottom: #DADADA 6px solid; 
	padding-right: 1px; 
	padding-left: 1px; 
	margin: 20px auto; 
	width: 800px;
	padding-top: 1px; 
	background: #90ee90;	
	z-index:1;
	}
	
#principal a:link{
	text-decoration: none;
	color: #006699;
	}	
	
#principal a:visited{
	text-decoration: none;
	color: #006699;
	}
	
#header {
	padding-right: 0px; 
	padding-left: 0px; 
	padding-bottom: 0px; 
	padding-top: 0px; 
	margin: 0px auto;
	background-color: #FFFFFF;	
	width: 100%; 	
	height: 150px;
	}
	
#header_infos {
	width: 800px;
 	height: 20px;
	}
	
#breadCrumb	a:link {
	color: #006699;
	text-decoration: none;	
	}
	
#ContentLeft {	
	float: left;
	width: 210px;
	margin-top: 70px;
	padding-right: 8px;
	padding-bottom: 2px;	
	border-right: 1px solid #CCCCCC;
	background: #ffc0cb;	
	z-index:1;
	}
	
#contentRight {
	float : right;	
	width: 550px;
	margin-top: 70px;
	margin-right:0px;
	padding-top: 8px;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 48px;	
	font-size: 100%;
	text-align: justify;
	background: #d2b48c;	
		}
	
#pied {  	
	clear: both;
	position: relative;
	margin-top:0;
	padding:0;
	padding-top: 20px;
	padding-bottom: 20px;
	border-top: 1px solid #CCCCCC;
	font-size: 100%;
	background: #E8E8E8;
	text-align: center;	
	}

.ContentLeft a:link {
	color: #006699;
	text-decoration: none;
	}
	
.ContentLeft a:visited {
	color: #006699;
	text-decoration: none;
	}
	
.blocnotes{
	font-weight: normal;
	font-size: 100%;
	color: #006699;
	}	

.titre {
	font-size: 120%;
	font-weight: bold;
	margin-top: 20px;
	}
	
.texte{
	padding:0;
	font-size: 100%;
	text-align: left;
	color: #6D7B87;
	}
	
.titre-sous-rubrique { 
	font-weight: bold;
	margin-top: 5px;
	}	
	
.ul_sous_rubrique { /
	margin-left: 10px;
	}
	

	
.texte-centrer{
	padding: 10px 0px 10px 10px;
	font-size: 100%;
	text-align: center;
	color: #006699;
	font-weight: bold;
	}	
	
.detail{ 
	padding-top: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
	padding-right: 0px;
	font-size: 95%;
	text-align: left;
	}		

.top {
	text-align: right;
	margin-top: 60px;
	font-size: 90%;
	}	

	
	
/* fix for browsers that don't need the hack */
html>body .ContentLeft li {
	border-bottom: none;
	}

/*********** #sectionLinks styles ***********/
#sectionLinks{
	position: inherit;
	margin: 0px;
	padding-left: 10px;
	font-size: 100%;
	text-align: left;
	}

Désolée pour la longueur...

et merci.

Tu as essayé en mettant display:block dans les ul de ton menu ?

Je viens de faire :

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
display:block ;
	}

-> le contenu des menus prend toute la largeur du texte, ce qui n'est pas mal du tout (merci !), mais le bloc de gauche continue de se déplacer lors du survol du dernier item du menu.

un ptit conseil au passage insère ton flash de cette façon :

<object type="application/x-shockwave-flash" data="xx.swf" width="xx" height="xx">
<param name="movie" value="xx.swf" />
<param name="wmode" value="transparent" />
<p>texte alternatif</p>
</object>

Quand on passe la souris sur les liens du menu c'est mieux si on a une flèche qui s'affiche, pour l'internaute c'est beaucoup plus ergonomique : donc je te conseil de mettre sur tes ul et li : cursor:pointer;

Sinon pour la colonne de gauche je ne vois pas trop pour le moment. La structure de ta page n'est très stable.

Essaies de retirer le z-index:1 à #ContentLeft .

J'ai modifié le #ContentLeft comme suit, mais rien n'y change :

#ContentLeft {	
	float: left;
	width: 210px;
	margin-top: 70px;
	padding-right: 8px;
	padding-bottom: 2px;	
	border-right: 1px solid #CCCCCC;
	background: #ffc0cb;	
	}

D'autres pistes ou des conseils pour un code plus stable ?

Merci.

J'ai finalement trouvé d'où venait l'erreur :
un href non fermé dans le dernier item du menu... Grrr...

Merci pour les bons conseils d'Ingrid.
Modifié par gaelle (19 Sep 2007 - 11:29)