[Résolu] Problème de menu sous IE 5

Question

raoudi57

15 Nov 2004 à 17:30

C'est mon premier post sur ce forum.

Je me présente, je suis Olivier consultant en info et animateur en info dans une maison de la culture (de Mondelange (Moselle) pour ceux qui connaisse).

Nous avons reçu notre freebox il y a quelque temps et j'ai donc développé un site web pour la maison.

http://mdc.mondelange.free.fr

Je me suis surtout inspiré du site "Alsacreation".

Le premier problème que je rencontre c'est que sous IE 6, mon menu vertical de gauche fonctionne bien, par contre sous IE 5.0, dès que le curseur arrive sur le munu, celui-ci se décalle vers le bas?

Avez-vous une piste?

Merci d'avance.

Olivier

*********************
Code HTML:
------------------

<HEAD>
<TITLE></TITLE>
<META NAME="Generator" CONTENT="Matizha Sublime 3.0">
<META NAME="Description" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Author" CONTENT="">

<link rel="stylesheet" type="text/css" href="_cadre.css">
<link rel="stylesheet" type="text/css" href="_menuv.css">
<link rel="stylesheet" type="text/css" href="_menuh.css">
<link rel="stylesheet" type="text/css" href="_menu_activite.css">
<link rel="stylesheet" type="text/css" href="_style.css">

</HEAD>
<BODY> 
                                
<div id="conteneur"><!-- debut conteneur -->

	<div id="entete"><!-- debut entete -->
		<IMG ALIGN="left" id="logo" SRC="images/logo.jpg"/>
		<IMG ALIGN="left" id="titre" SRC="images/entete.gif"/>
	</div><!-- fin entete -->

	<div id="haut"><!-- debut haut -->
		<ul class="menuhaut">
			<li><a href="index.php?page=contact">Contacts</a></li>
			<li><a href="index.php?page=lien">Liens</a></li>
			<li><a href="index.php?page=horaire">Horaires</a></li>
			<li><a href="index.php?page=manifestation">Manifestations</a></li>
			<li><a href="index.php?page=actualite">Actualités</a></li>
		</ul>
	</div><!-- fin haut -->

	<div id="gauche"><!-- debut gauche -->
		<ul class="menugauche">
  			<li><a href="index.php?page=chiffres_et_lettres_accueil">Chiffres et lettres</a></li>	
  			<li><a href="index.php?page=couture_accueil">Couture</a></li>	
  			<li><a href="index.php?page=danses_accueil">Danses</a></li>
			<li><a href="index.php?page=dessin_pastel_accueil">Dessin Pastel</a></li>	
  			<li><a href="index.php?page=emaux_accueil">Emaux</a></li>
			<li><a href="index.php?page=etain_repousse_accueil">Etain Repoussé</a></li>
			<li><a href="index.php?page=groupe_vocal_accueil">Groupe Vocal</a></li>
			<li><a href="index.php?page=informatique_accueil">Informatique</a></li>
			<li><a href="index.php?page=jeux_de_strategies_accueil">Jeux de Stratégies</a></li>
			<li><a href="index.php?page=loisirs_enfants_accueil">Loisirs Enfants</a></li>
			<li><A href="index.php?page=modelisme_accueil">Modélisme</a></li>
			<li><a href="index.php?page=patchwork_accueil">Patchwork</a></li>
			<li><a href="index.php?page=peinture_porcelaine_accueil">Peinture Porcelaine</a></li>
			<li><a href="index.php?page=perles_de_rocaille_accueil">Perles de Rocailles</a></li>
			<li><a href="index.php?page=poterie_accueil">Poterie</a></li>
			<li><a href="index.php?page=pyramide_accueil">Pyramide</a></li>
			<li><a href="index.php?page=scrabble_accueil">Scrabble</a></li>
			<li><a href="index.php?page=tableau_relief_accueil">Tableau Relief</a></li>
			<li><a href="index.php?page=tarot_accueil">Tarot</a></li>
			<li><a href="index.php?page=theatre_accueil">Théâtre</a></li>
			<li><a href="index.php?page=vannerie_accueil">Vannerie</a></li>
		</ul>
	</div><!-- fin gauche -->
	  
	<div id="droite"><!-- debut droite -->
	</div><!-- fin droite -->
	  
	<div id="centre"><!-- debut centre -->
		<?php 
		if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page']; 
		switch($page)
		{
		case 'accueil': include ('accueil.html');break;
		case 'chiffres_et_lettres_accueil': include ('activites/chiffres_et_lettres/chiffres_et_lettres_accueil.html');break;
		case 'couture_accueil': include ('activites/couture/couture_accueil.html');break;
		case 'danses_accueil': include ('activites/danses/danses_accueil.html');break;
		case 'dessin_pastel_accueil': include ('activites/dessin_pastel/dessin_pastel_accueil.html');break;
		case 'emaux_accueil': include ('activites/emaux/emaux_accueil.html');break;
		case 'etain_repousse_accueil': include ('activites/etain_repousse/etain_repousse_accueil.html');break;
		case 'groupe_vocal_accueil': include ('activites/groupe_vocal/groupe_vocal_accueil.html');break;
		case 'informatique_accueil': include ('activites/informatique/informatique_accueil.html');break;
		case 'jeux_de_strategies_accueil': include ('activites/jeux_de_strategies/jeux_de_strategies_accueil.html');break;
		case 'loisirs_enfants_accueil': include ('activites/loisirs_enfants/loisirs_enfants_accueil.html');break;
		case 'modelisme_accueil': include ('activites/modelisme/modelisme_accueil.html');break;
		case 'modelisme_photo': include ('activites/modelisme/modelisme_photo.html');break;
		case 'modelisme_calendrier': include ('activites/modelisme/modelisme_calendrier.html');break;
		case 'modelisme_lien': include ('activites/modelisme/modelisme_lien.html');break;
		case 'patchwork_accueil': include ('activites/patchwork/patchwork_accueil.html');break;
		case 'peinture_porcelaine_accueil': include ('activites/peinture_porcelaine/peinture_porcelaine_accueil.html');break;
		case 'perles_de_rocaille_accueil': include ('activites/perles_de_rocaille/perles_de_rocaille_accueil.html');break;
		case 'poterie_accueil': include ('activites/poterie/poterie_accueil.html');break;
		case 'pyramide_accueil': include ('activites/pyramide/pyramide_accueil.html');break;
		case 'scrabble_accueil': include ('activites/scrabble/scrabble_accueil.html');break;
		case 'tableau_relief_accueil': include ('activites/tableau_relief/tableau_relief_accueil.html');break;
		case 'tarot_accueil': include ('activites/tarot/tarot_accueil.html');break;
		case 'theatre_accueil': include ('activites/theatre/theatre_accueil.html');break;
		case 'vannerie_accueil': include ('activites/vannerie/vannerie_accueil.html');break;

		case 'horaire': include ('horaire.html');break;
		case 'contact': include ('contact.html');break;
		case 'manifestation': include ('manifestation.html');break;
		case 'actualite': include ('actualite.html');break;
		case 'lien': include ('lien.html');break;
		} 
		?>
	</div><!-- fin centre -->
	<!-- debut pied -->  
	<div id="pied">
		<table style="width:100%;height:100%"><tr valign="bottom"><td><p>&nbsp;Version 1.0</p></td><td style="text-align:right"><p style="text-align:right">@mail Webmaster: <a href="mailto:o_aubertin@hotmail.com">o_aubertin@hotmail.com&nbsp;</a></p></td></tr></table>
	</div><!-- fin pied -->

</div><!-- fin conteneur -->

</BODY>
</HTML>

*********************
Code CSS cadre:
----------------


body	{
	background-color:#9999CC;
	margin: 10px 0;
	padding: 0;
	text-align: center;
	}

#conteneur{
	margin: 0 auto;
	text-align: left;
	border: 1px solid #000000;
	width: 975px;
	height: 100%;
	background-color: #00569E;
	}

#entete	{
	height: 150px;
	background-repeat: no-repeat;
	}

#titre	{
	margin-left: 120px;
	margin-top: 10px;
	}

#logo	{
	float: left;
	margin-left: 1px;
	margin-top: 1px;
	}

#haut	{
	background-image: url("images/fond_menu_haut.gif");
	height: 45px;
	}

#centre	{
	background-color: #3588cd;
	border: 2px solid #000000;
	margin-left: 150px;
	padding: 15px;
	height: 100%;
	}

#gauche	{
	background-image: url("images/fond_menu_gauche.gif");
	float: left;
	width: 145px;
	height: 100%;
	}

#droite	{
	background-image: url("images/fond_menu_droite.gif");
	float: right;
	width: 50px;
	height: 100%;
	}

#pied	{
	height: 45px;
	background-image: url("images/fond_pied.gif");
	text-align: left;
	}

*********************
Code CSS menu vertical:
-----------------------


ul {
list-style-type: none; 	/* on supprime les puces inutiles */
width: 100%;		/* précision pour Opera */
margin: 5px;
padding-top: 20px;
}

li {
float: left;		/*on aligne les listes sur la gauche */
}  		

.menugauche a {
font-size: 9pt;
font-family: Arial, sans-serif ;
color: white;
width: 125px; 		/* on définit la taille du bouton de menu_v */
float: left;
display: block;
text-align: center;
border: 1px solid black;
text-decoration: none;
color: #000000;
background: #fff;
}
	 
.menugauche a:hover {
background: #FFB164;
}

.menugauche a:active {
background: #FFB164;
color: #000000;
}

Modifié le 27 Nov 2004 - 15:16

Raphael

Administrateur

15 Nov 2004 à 17:41

Salut,

Pourrais-tu s'il te plaît éditer ton message et utiliser les boutons de CODE prévus pour ça : ça faciliterait énormément la lecture.

Merci Smiley cligne

raoudi57

15 Nov 2004 à 19:27

Désolé je ne connaissais pas la fonction.

Chose faite Smiley smile

Merci d'avance pour vos réponses

Belisarius

15 Nov 2004 à 21:27

Sous Safari OSX le menu est décalé vers la droite et le bas de grosso modo 30 px

PS : évite le comic sans MS plizz

raoudi57

15 Nov 2004 à 21:47

vi effectivement, il y a le même problme sous firefox, mais cela aurait été ma 2ème question Smiley fou

J'ai du mal à obtenir un bonne mise en page déjà avec IE, je verrais pour firefox plus tard.

Raoudi57

Raphael

Administrateur

15 Nov 2004 à 21:59

raoudi57 a écrit :

J'ai du mal à obtenir un bonne mise en page déjà avec IE, je verrais pour firefox plus tard.

Raoudi57

Ah non, tu prends le problème à l'envers là.
IE est bien plus permissif que Firefox. En assurant un code standard et propre sur Firefox, tu n'auras (peut-être) que quelques retouches à faire ensuite sur IE.

Igor

15 Nov 2004 à 22:02

raoudi57 a écrit :

J'ai du mal à obtenir un bonne mise en page déjà avec IE, je verrais pour firefox plus tard.

A titre personnel je préfère commencer par avoir un rendu adéquat avec Firefox ou autre navigateur plus respectueux des standards et ensuite voir ce que cela donne sur les différents IE, les soucis rencontrés avec IE sont bien souvent toujours de même nature et à l'expérience vite identifiés, et en fait pas très nombreux (ie6), soit une mauvaise interprétation de certaines règles, soit l'absence de support d'autres règles, ou soit une présentation par défaut de certaines balises non stylées par css différentes suivant les agents utilisateurs (ce qui n'est pas à proprement parler un problème spécifique à IE).

raoudi57

22 Nov 2004 à 11:42

Bonjour,

quelqu'un peut-il me donner une piste pour mon problème sous firefox?

http://mdc.mondelange.free.fr

Merci d'avance.

Raoudi57

Raphael

Administrateur

22 Nov 2004 à 11:49

C'est tout simplement dû aux padding par défaut sur <ul>.
Rajoute un padding:0; sur ta liste et ça ira bien mieux.

C'est un problème classique : http://www.alsacreations.com/articles/compatibilite/ Smiley cligne

raoudi57

22 Nov 2004 à 16:26

Merci beaucoup ça marche mieux Smiley smile

Raoudi57

Raphael

Administrateur

22 Nov 2004 à 16:55

Si ton problème est réglé, merci de rajouter un [Résolu] en éditant le titre de ton sujet Smiley cligne

Sujet clos