28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème margin avec li sur IE

Bonjour,

IE me fait des marge entre les li , je n'arrive pas a trouver le pourquoi.

Merci pour votre aide


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>un menu en CSS avec puces</title>
<style type="text/css">
<!--
table {border: 1px solid black}
td {border: 1px dotted gray}
div {border: 1px solid orange}
img, form {border: 1px dashed blue}
h1, h2, h3, h4, h5, h6, p {border: 1px solid yellow}
ul {border: 1px solid green}
li {border: 1px solid lightgreen}

ul#article_menu {
	position: absolute;
	top: 300px;
	left: 13px;
	list-style: none;

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

}
ul#article_menu li {
	display: block;
	height: 10px;
	width: 20px;
	margin: 0;
	padding: 0;
}
ul#article_menu li a{
	display: block;
	height: 10px;
	width: 20px;
	background: Yellow;
	margin: 0 0 0 0;
	font-size: 1px;
}

-->
</style>
</head>

<body>
		<ul id="article_menu">
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
				</ul>
</body>
</html>

Modifié par gforce (06 Nov 2006 - 10:06)
Il me semble qu'un display:block sur des liens dans des items de liste (li) provoque ce genre de bug sur IE

essaie un height:1% à la place du height: 10px dans ton sélecteur ul#article_menu li

si ça fonctionne cette propriété sera à mettre uniquement pour IE, avec les commentaires conditionnels qui vont bien.
Bonjour,

Ce problème est du au layout d'IE (concept plutôt flou de microsoft),
dans le cas présent une hauteur avec n'importe quelle valeur résoud le bug :
height:100%, par exemple.

Dans ce cas pas besoin de surcharger avec des commentaires conditionnels.
Pas de répercussion dans les autres navigateurs.
Modifié par EricLB (21 Oct 2006 - 18:37)
Salut

Si c'était un problème de layout, il aurait dû être réglé par le 
height: 10px;
Je pense que le problème vient plutôt de l'incompréhension de la notion de hauteur fixée de IE. Les éléments de liste étant trop petits pour contenir une ligne de texte, ce qui pousse IE à les afficher plus grandes que demandées.

J'arrive à les recoller en utilisant : 
ul#article_menu li {
	display: block;
	font-size: 1%;
	line-height: 1%;
	width: 20px;
	margin: 0;
	padding: 0;
}
mais c'est un peu délicat d'utiliser une taille de police aussi petite.
Sopo a écrit :
Salut

Si c'était un problème de layout, il aurait dû être réglé par le 
height: 10px;
Je pense que le problème vient plutôt de l'incompréhension de la notion de hauteur fixée de IE. Les éléments de liste étant trop petits pour contenir une ligne de texte, ce qui pousse IE à les afficher plus grandes que demandées.

J'arrive à les recoller en utilisant : 
ul#article_menu li {
	display: block;
	font-size: 1%;
	line-height: 1%;
	width: 20px;
	margin: 0;
	padding: 0;
}
mais c'est un peu délicat d'utiliser une taille de police aussi petite.


Cela a effectivement réglé mon problème. Je t'en remercie
Smiley biggrin
Sujet clos
Aller à