[Résolu] Menu flottant latéral : trop large sous IE

Bonjour !

Bon, j'imagine que le titre (qui ne peut être très long) fait penser à un bête problème de modèle de boîte, mais j'ai bien vérifié et revérifié, je ne vois pas COMMENT ça pourrait l'être... Ça fait plusieurs jours que je bloque...

Explications :
Je planche sur une structure de site, dispo à cette adresse

Et le fait est que lorsque que je visionne le résultat sous IE, le cadre est légèrement trop large

Évidemment, sous Konqueror, Firefox ou Safari, tout va bien...

Voici le code XHTML d'un menu :

	<div id="parcours">

		<div>
			<ul>
				<li><h1><a href="#">&Agrave; voir</a></h1></li>
				<li><a href="#">- vide -</a></li>
				<li><a href="#">- vide -</a></li>
				<li><a href="#">- vide -</a></li>
				<li><a href="#">- vide -</a></li>
				<li><a href="#">- vide -</a></li>
			</ul>
		</div>

		<div>
			<ul>(deuxième petit menu, etc)...
	</div>

Et voici la (longue) CSS associée :

#parcours {
	clear:right;
	display: inline; /* MSIE */
	float:right;

	font-family: 'Bitstream Vera Sans',Arial,sans-serif;
	font-size: small;
	text-align:center;

	padding:0;
	margin-top:60px;
	}

#parcours div {
	width: 170px;

	margin:20px 10px 0 10px;

	background: #ffffff;

	border-top: 1px solid #6c6c6c;
	border-left: 1px solid #6c6c6c;
	border-right: 2px solid #6c6c6c;
	border-bottom: 2px solid #6c6c6c;
	-moz-border-radius:10px;
	-khtml-border-radius:10px;
	}
  
#parcours ul {
	list-style:none;
	padding:0;
	}

#parcours ul li {
	display: inline; /* MSIE */
	}

#parcours ul li a {
	display:block;
	margin:0;
	padding:0;
	width:170px;
	  }

#parcours h1 {
	text-decoration:none;
	font-variant:small-caps;
	font-size:small;
	font-weight:bold;
	color:white;
	background:#BD0000;
	}

#parcours h1 a:link {
	text-decoration:none;
	color:white;
	}

#parcours h1 a:visited {
	text-decoration:none;
	color:white;
	}

#parcours h1 a:hover {
	background: #257DA9;
	}

#parcours a:link {
	color: #545454;
	text-decoration: none;
	}

#parcours a:visited {
	color: #545454;
	text-decoration: none;
	}

#parcours a:hover {
	background-color: #545454;
	color:white;
	}

Malheureusement je ne peux pas joindre une capture d'écran de IE, vu que Windows n'est pas dans le coin en ce moment
Sachez seulement que le menu a une marge d'une vingtaine de pixels qui non seulement se superpose au cadre de texte principal, mais en plus casse tout l'effet de survol

J'ai trituré la proriété "margin", pour le moment rien n'y fait...
Modifié par 1000k (13 Jun 2005 - 10:32)

Chaque navigateur utilise des propriétées par défaut qui sont appliquées lorsqu'aucune règle n'est spécifiée par l'auteur de la page. Evidemment ces valeurs diffèrent d'un navigateur à l'autre ce qui est parfaitement normal.

IE a par défaut une marge à gauche non nulle pour l'élément ul ce qui donne l'effet qui te perturbe.
Il te suffit de spécifier une marge nulle pour cet élément.

Personnellement je j'utilise * {margin:0;padding:0} pour éviter les oublis.

En effet, en définissant une marge à 0 pour l'élément ul, ça va tout de suite mieux !
Merci de ta réponse.

Par contre, avec * {margin:0;padding:0} ça oblige à définir les marges et padding pour chaque élément, ça doit considérablement augmenter la taille de la CSS, non ?