[Résolu] Pb affichage IE - espace à droite <li>

Bonjour,

Mon problème a peut-être et même surement déjà été traité mais je ne trouve pas de solution après mes recherches donc me voici.

Voilà ce que j'ai sous IE :




Voilà ce que j'ai sous FF :



Voilà mon code HTML :

<div class="menuBoite">
	<ul id="menuTitle">Menu outil de mutation</ul>
	<ul id="menuCorps">
		<li><a class="info" href="mutation/preparation.jsp">Pr&eacute;parer une mutation<span>G&eacute;n&eacute;ration des fichiers de mutation pour les mutations de NS / Carte / Vp</span></a></li>
		<li><a class="info" href="mutation/files.jsp">G&eacute;rer les fichiers de mutation<span>Envoi / T&eacute;l&eacute;chargement des fichiers g&eacute;n&eacute;r&eacute;s par la pr&eacute;paration</span></a></li>
	</ul>
</div>

Et voilà ma feuille de style CSS :

ul#menuTitle {
	background-color : #699DC7;
	color : #FFFFFF;
	vertical-align : middle;
	font-size : 13px;
	text-align: center;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

ul#menuCorps {
	padding: 0 10 0 0;
	margin: 0 0 0 0;	
}

ul#menuCorps li {
	padding: 0 0 0 0;
	margin: 0 0 0 30;
	background-color:#FFFFFF;
}

div.menuBoite {
	border: 1px solid;
	padding: 0 0 0 0;
	margin: 10 10 10 10;
}

Comme vous pouvez le voir j'ai un décalage sous IE pour le texte dans la 2 ème balise <li>.
J'ai essayer de jouer sur les attributs de padding et marging mais rien n'y fait.

Est ce que quelqu'un aurait une solution à mon problème ?

Je vous remercie d'avance.
Modifié par albator_38 (13 Jul 2006 - 14:46)

Je ne sait pas quelle en est l'incidence mais le <LI> n'a pas de fermeture de tag, avec IE du moins c'est sûr.
Opera et FX, je pensais mais je ne sais pas.

Tu as raison, enfin je crois.
C'est moi qui ai ajouter les fermetures de ligne </li> pour voir si cela pouvait venir de là mais avec ou sans fermeture de ligne le résultat est toujours le même.

CF image du post initiale.

Alors change la def css de ta LI et sépare la de l'UL.
Modifié par Deny (13 Jul 2006 - 12:43)

De toute façon si tu LI est sous l'UL, elle reprend automatiquement ses défintions de css.
Modifié par Deny (13 Jul 2006 - 12:43)

Je ne comprends pas ce que tu veux dire par :

a écrit :
Alors change la def css de ta LI et sépare la de l'UL.

J'ai essayé en donnant une classe à mes <LI class="classLi" et en remplaçant :

ul#menuCorps li {
	padding: 0 0 0 0;
	margin: 0 0 0 30;
	background-color:#FFFFFF;
}

par :

li.classLi {
	padding: 0 0 0 0;
	margin: 0 0 0 30;
	background-color:#FFFFFF;
}

Mais rien n'y fait.

Est cela que tu voulais dire ?
Modifié par Igor (13 Jul 2006 - 13:30)

Bonjour,

a écrit :
Je ne sait pas quelle en est l'incidence mais le <LI> n'a pas de fermeture de tag, avec IE du moins c'est sûr.

C'est faux, les balises <li> doivent être fermées avec </li>, peu importe le navigateur.

Ensuite, tu dois mettre une unité de mesure à tes grandeurs dans le css. (px, em etc.) (Sauf pour les zéros, où ce n'est pas nécessaire)

margin: 0 0 0 30px;

J'ai bien rajouté l'unité dans mes padding et margin en rajoutant px là où la valeur est différente de 0 mais ça n'a aucune incidence sur l'affichage, que ce soit sous IE ou FF.

D'autres idées ?

Eradwen a écrit :
Bonjour,

Je ne sait pas quelle en est l'incidence mais le <LI> n'a pas de fermeture de tag, avec IE du moins c'est sûr.

C'est faux, les balises <li> doivent être fermées avec </li>, peu importe le navigateur.

Dans le même ordre un ul ne peut contenir que des li. Ton premier ul m'a tout l'air d'être un titre. Pourquoi ne pas utiliser un niveau de titre qui est fait pour cela ?

Si je n'ai pas utilisé de niveau titre c'est que je n'y ai pas pensé.
Mais tu as raison un niveau titre aurait plus sa place ici.

J'ai donc modifié mon code et remplacé le premier ul par un h2.

Mais le problème persiste et signe

Essayes de mettre les marges de ul et li à 0.

ul, li{
margin:0;
padding:0;
}

Puis:

li{
margin-left:30px;
background:#fff;
}

Chez moi çà fonctionne sur les 2 navigateurs.

C'est bon j'ai trouvé.

Je n'avais pas mis tout le code de la feuille CSS parce que je pensais que cela venait d'une des balises que j'ai défini et que j'ai mis dans mon post.

Mais cela provenait de la définition de ma balise a.info dans laquelle j'avais mis

position: relative;

J'ai donc enlevé cet attribut qui suite à certaines de mes modifications ne servait plus et tout est rentré dans l'ordre sous IE et FF.

Par contre j'aimerais bien comprendre pourquoi cet attribut a induit ce comportement.

Merci quand même pour votre aide et le temps que vous avez passé pour essayer de m'aider.