28173 sujets

CSS et mise en forme, CSS3

[Resolu] Pb IE et UL avec des A en display block

Bonjour!

je rencontre des problèmes d'affichage sous IE en tentant (en vain) de faire une liste avec des <a> dedans. Rien de bien complexe. J'ai isolé le problème, le voici dans sa plus petite forme :


<html>
<body>
	<style>
	#test {
	border: 1px solid green;
	}
	#test li {
	border: 0px solid red;
	}
	#test a {
	display: block;
	border: 1px solid red;
	}
	</style>
	<ul id="test">
		<li><a href="#">hop</a></li>
		<li><a href="#">hop</a></li>
		<li><a href="#">hop</a></li>
		<li><a href="#">hop</a></li>
		<li><a href="#">hop</a></li>
	</ul>
</body>
</html>


Sous IE, le fait de mettre le <a> en block créé de grosses marges autour. Ce qu'il y a de bizarre, c'est qu'en mettant un border au LI, hop miracle, les marges disparaissent (mais du coup, j'ai un border....).

Y'a-t-il une solution à ça ?

merci d'avance
rekam
Modifié par rekam (30 Aug 2007 - 11:48)
bonjour,

Je comprend pas trop le probleme. Si tu veux enleve les bordures alors il te suffit d'enleve ta ligne qui la crée.


border: 1px solid red;


Et pourquoi les met tu en block ? car si tu en a pas besoin et que tu veux mettre une bordure a tes liens il faut enleve le display: block.

Sinon il faudrai mettre un largeur a tes li...
Salut,

Je ne sais pas si ça correspond, mais j'ai souvent vu des espaces blancs bidons se créer dans des li sous IE. La solution que j'avais utilisée : coller toutes les balises fermantes à la prochaine ouvrante, ce qui dans ton cas donnerait
<ul id="test">
  <li>
    <a href="#">hop</a></li><li>
    <a href="#">hop</a></li><li>
    <a href="#">hop</a></li><li>
    <a href="#">hop</a></li></ul>

Modifié par Marvin Le Rouge (30 Aug 2007 - 10:55)
Halindel >>
je display block les <a> pour qu'ils prennent automatiquement toute la largeur du li. Le truc des borders, tu peux essayer chez toi. Tu copies-colles mon bout de code et tu tests sous IE. T'auras 15px de margin-bottom sous chaque <a>. Si tu mets le border au LI, ces 15px disparaissent. Epatant Smiley biggol


Marvin Le Rouge >>
ça MARCHE ! Il faut bien tout mettre sur la même ligne (je compati d'avance à celui qui reprendra mon code plus tard, lol Smiley lol )

Merci!
Sujet clos
Aller à