Bonjour tout le monde, j'ai un script qui permet au passage de la souris de décaler le menu de 30px a droite puis reviens a son emplacement initial.

Il fonctionne tres bien sous FF, mais sous IE les points des <li> sont décaler par rapport au menu.

Voici mon script

<script>
$(document).ready(function(){
	// Intialisation du menu
	var sCurrentAction = 'action1';
	$('#' + sCurrentAction).animate({ left: '0px' }, {queue: false, duration: 600});

	$('ul#menu li').hover(function(){
				$(this).animate({ left:'30px' },{queue:false,duration:600});	
			},
			function(){
				if (this.id != sCurrentAction)
					$(this).animate({ left:'0px' },{queue:false,duration:600});
			});
				
	$('ul#menu li').click(function () {
		// On retire l'ancien "action"
		if (sCurrentAction != '')
			$('#' + sCurrentAction).animate({ left: '0px' }, {queue: false, duration: 600});

		// On met à jour l'action actuelle
		sCurrentAction = this.id;
	});
});

</script>

voici ma partie html

<ul id="menu">
	    <li id="action2"><a href="alzheimer.php">Alzheimer</a></li>
            <li id="action2"><a href="repas.php">Repas</a></li>
            <li id="action3"><a href="bain.php">Bain</a></li>
            <li id="action4"><a href="confort.php">Confort</a></li>
            <li id="action5"><a href="mobilite.php">Mobilité</a></li>
            <li id="action6"><a href="securite.php">Sécurité</a></li>
            <li id="action7"><a href="autonomie.php">Autonomie</a></li>
            <li id="action8"><a href="pratique.php">Pratique</a></li>
            <li id="action9"><a href="jeux.php">Jeux et loisirs</a></li>
            <li id="action10"><a href="promotion.php">Promotions</a></li>
  </ul>

Voici l'adrese pour avoir un apercu: espaceseniors-leblog

Merci pour votre aide

il faut réinitialiser toutes les propriétés CSS par défaut, c'est un problème de compatibilité des navigateurs. mais surtout la façon de faire très différente chez IE.

utilise un peu le reset.css de chez yahoo: http://developer.yahoo.com/yui/3/cssreset/

Merci de ta réponse, mais ça ne fonctionne pas, en fait ca m'a enlevé le point de <li>

J'ai copier cette ligne dans ma page menu

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">

Je l'ai laisser en ligne pour que tu vois le résultat.

eh bien tu dois gérer ce point précis manuellement avec la propriété CSS approprié.

c'est liste-style-type que tu dois gérer:
http://www.siteduzero.com/tutoriel-3-1 [...] tml#ss_part_5

Salut!

je viens de mettre manuellement la propriété list-style-type:disc; dans ma feuille de css

Ca ne fonctionne toujours pas, je retourne au meme point du début, c'est a dire un décalage entre le menu et le point.

okay donc, tout ce que tu as à faire c'est de spécifier manuellement la padding-left et le margin-left de la liste.

Je viens d'essayer avec le padding et le margin mais ça ne fonctionne toujours pas.

Car le padding et le margin déplace le point et le menu en meme temps alors que mon problème sous IE est que le point est au dessus du menu

Bonjour,

Je te conseille de ne pas utiliser le reset CSS, ça ne corrige pas grand chose et ça ajoute plutôt des problèmes supplémentaires ; préfére une <lien url="http://www.alsacreations.com/astuce/lire/654-feuille-de-styles-de-base.html">feuille de base</url>.

Le problème vient d'un overflow: hidden; sur les liens du menu.

Merci warpShadow c'est nikel!!!