[résolu]Menu (basé sur ul, li et a) décalé sous IE

Bonjour tout le monde.
Je suis en train de remodeler mon portfolio et j'ai un soucis avec mon menu.

Sous Firefox le positionnement est parfait, sous IE par contre il y a un soucis : le menu est décalé.
voici l'adresse de la page http://zonezand.free.fr/site/portfolio/ pour que vous vous rendiez mieux compte.

La structure des blocs est la suivante :

<div id="global">
	<div id="gauche">
		<div id="fenetre"></div>
		<ul id="menu">
			<li><a href="">Accueil</a></li>
			<li><a href="">CV</a></li>
			<li><a href="">Réalisations</a></li>
			<li><a href="">Liens</a></li>
		</ul>

	</div>
	<div id="droite">
	</div>
</div>

Voici le code CSS de mon menu :

div#gauche ul#menu{
	margin:0;
	list-style-type:none;
	list-style-position:inside;
	padding:0;
	margin-top:20px;
}
div#gauche ul#menu li{
	margin:5px 0 5px 0;
	padding:0;
}
div#gauche ul#menu li a{
	display:block;
	width:200px;
	height:30px;
	text-decoration:none;
	text-transform:uppercase;	
	text-align:center;	
	background-image:url("images/menu.gif");
	background-repeat:no-repeat;
	background-position:fixed;
	font-family:"Trebuchet MS", Tahoma, sans-serif;	
	color:#5989BB;
	font-size:1.2em;
	font-weight:bold;
	padding:4px 0 0 0;
}
div#gauche ul#menu li a:hover{
	background-position:-200px 0;
	color:#FFFFFF;	
}

ayant mis tout les padding-left à 0, je me demande bien pourquoi les blocs sont décalés...Ils semblerait que ce soit les blocs <a> qui posent problème (j'ai testé en mettant des bordures sur chaque type de bloc => ul, li et a)

J'espère que vous pourrez m'aider.

Merci d'avance.
Modifié par Zeke (08 Mar 2006 - 20:36)

Bonjour,

tu peux commencer par regarder ce point de FAQ: Comment régler les problèmes classiques de marges, d'espaces et de décalages ?, en particulier 1.4 le sélecteur universel ...

Felipe

j'ai bien suivi tout ce qui était écrit dans la page que tu m'as indiqué(je suis tjrs cette démarche en cas de souci) mais là, rien à faire, je comprend pas...

La capture suivante montre la tete du site sous FF :
http://zonezand.free.fr/bordel/FF.jpg

et celle si sous IE :
http://zonezand.free.fr/bordel/IE.jpg

J'ai mis des bordures et des fonds colorés sur mes élements :
ul => bordure bleu, fond gris clair
li => bordure verte, fond gris foncé
a => bordure rouge haché, fond noir

on voit bien sur les captures que sous IE les blocs <a> sont décalés bien qu'ils aient une padding à 0 et un margin à 0 (les <li> qui les contiennent ont eu aussi un padding et un margin à 0)

Je vois vraiment pas....

merci d'avance

pas d'avis ou de solutions à l'horizon ?

Sinon c'est bien la balise <a>(avec le display:block) qui pose probleme car si je la remplace par autre chose, je n'ai plus le souci...

C'est incompréhensible...
Modifié par Zeke (07 Mar 2006 - 12:16)

Bonjour,
Encore un coups du haslayout

Zeke a écrit :
pas d'avis ou de solutions à l'horizon ?

Sinon c'est bien la balise <a>(avec le display:block) qui pose probleme car si je la remplace par autre chose, je n'ai plus le souci...

C'est incompréhensible...

Peut-être en donnant le layout aux items de at liste:

<!--[if lte IE 6]>
<style>
#menu li{ height: 0; }
</style>
<![endif ]-->

Modifié par chmel (07 Mar 2006 - 13:12)

Merci pour ta réponse.
j'ai essayé et j'avais encore des soucis (seul le premier <li><a>...</a></li>) se mettait à sa place...

du coup, j'ai changé de méthode. j'ai utilisé des les balises <dl>, <dt> et <dd> et maintenant ca fonctionne.

Merci encore !