28172 sujets

CSS et mise en forme, CSS3

[résolu]Une marge (ou un padding ?) dans <li><a>

Bonjour,

J'intègre un snippet (MaxiGallery, pour MODx ) et dans un container qui génère des listes de vignettes d'images cliquables, je n'arrive pas à voir d'où vient l'écart 'bottom' dans les <li> :
Il y a toujours ~4 px de marge ou de padding en bottom sur les li OU (?) sur les <a> contenus.

Je n'ai que peu de latitudes pour le code html généré et un plus dans les css, mais j'avoue que je suis un peu sec.

Merci

ps: j'ai mis une couleur de background au li pour voir cet écart...

extrait du default.css linké:

ul.thumbs li {
	list-style: none;
	list-style-image: none !important;
	float: left; /*margin: 0px 4px 0 4px !important;*/
	display: block;
	margin: 0!important;
	padding: 0;
	background-color: #F8F8F8;
}
ul.thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	clear: both;
}
ul.thumbs li img {
	border: none;
	margin: 0!important;
	padding: 0!important;
}
ul.thumbs li a {
	background: none !important;
	text-decoration: none;
	border: 0;
	padding: 0!important;
	margin: 0!important;
	
}



et le bout de html concerné:

<div class="thumbscontainer">
			<ul class="thumbs">
				<!--
voir  http://wiki.modxcms.com/index.php/MaxiGallery#Picture_and_thumbnails_on_same_page
 

1. Create a snippet call to list thumbnails
[!MaxiGallery? &galleryPictureTpl=`tpl-mg-projet-thumb` &js=`mgJs`!] 
-->

<li>
       <a href="javascript:void(0);" onclick="javascript:showPic('/assets/galleries/53/testo.jpg','testo.jpg','test du chmod error',130,97);return
false;">
 <img src="/assets/galleries/53/tn_testo.jpg" class="thumbnail" title="testo.jpg" alt="testo.jpg" width="66">
       </a>
</li>

<li>
       <a href="javascript:void(0);" onclick="javascript:showPic('/assets/galleries/53/crayonne1.jpg','','',549,737);return
false;">
 <img src="/assets/galleries/53/tn_crayonne1.jpg" class="thumbnail" title="" alt="" width="53">
       </a>

</li>

<li>
       <a href="javascript:void(0);" onclick="javascript:showPic('/assets/galleries/53/layout3.jpg','Titre éèùà /\ \' \'  suite ôêîëï','description 1   éèùà /\ \' \'  suite ôêîëï',737,554);return
false;">
 <img src="/assets/galleries/53/tn_layout3.jpg" class="thumbnail" title="Titre éèùà /\ &quot; ' 
suite ôêîëï" alt="Titre éèùà /\ &quot; ' 
suite ôêîëï" width="66">
       </a>
</li></ul>


<ul class="thumbs">.... autre liste...
			</ul>
		</div>


Je remets comme l'autre fois une fausse url où il convient de retirer les blancs (pour raisons de référencement non souhaité pour le moment)
ma r io n-ta lag rand. com/pro jet-1.html
Modifié par elz64 (09 Aug 2008 - 17:12)
bingo!

Merci...
sur le LI un line-height à zéro règle ca (FF +IE)
Je ne vois toujours pas le rapport.. je sens que je vais apprendre un truc..

Un élément li déclaré en block, pour lequel le line-height importe ..?..??
voilà qui me laisse perplexe.
elz64 a écrit :
je sens que je vais apprendre un truc..

Tu apprendras le truc en question en lisant, dans la FAQ, l'item qui parle de marge indésirable sous les images.

elz64 a écrit :
Un élément li déclaré en block, pour lequel le line-height importe ..?..??

La hauteur de ligne importe pour n'importe quel élément de type bloc, du moment qu'il contient du texte ou des éléments remplacés tels que des images.
le line height- ne marche pas pour moi

Voyez-vous même :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--

ul {
	margin: 0px;
	padding: 0px;
	
}

li {
	list-style-image: none;
	list-style-type: none;
	
        line-height:0px;
	padding:0px;
	margin:0px;

}

img {
	border:none; line-height:0px;
}
-->
</style>
</head>

<body>
<ul>
  <li><img src="design/_menucommon_top.png" alt="u" width="193" height="7" /></li>
  <li><a href="#"><img src="design/_liste_cours.png" alt="u" width="193" height="30" /></a></li>
  <li><a href="#"><img src="design/_lieux_cours.png" alt="u" width="193" height="30" /></a></li>
  <li><a href="#"><img src="design/_prof_diplom.png" alt="u" width="193" height="30" /></a></li>
  <li><a href="#"><img src="design/_resp_courriers.png" alt="u" width="193" height="30" /></a></li>
  <li><a href="#"><img src="design/_resp_pedago.png" alt="u" width="193" height="30" /></a></li>
  <li><a href="#"><img src="design/_adhesion.png" alt="u" width="193" height="30" /></a></li>
  <li><img src="design/_menucommon_bottom.png" alt="u" width="193" height="9" /></li>
</ul>
</body>
</html>



y a t-il qlq'un qui sait le problème
Sujet clos
Aller à