[Résolu] Une marge apparaît alors qu'elle n'est pas définie

Salut,

C'est un problème classique mais je ne trouve pas la solution! J'ai une liste de liens pour laquelle je définie les marges externes et internes. Je fais tous cela en manipulant le DOM avec jquery.

Les marges des <li> semblent correctement définies mais j'ai une marge basse qui apparaît, selon l'élément entouré sélectionné cela vient du <ul>.

Pourtant l'inspecteur DOM me donne ceci

<UL id="__Nav4" style="margin: 0pt; padding: 0pt;">
  <LI style="margin: 0pt 0pt 0pt 5px; padding: 0pt; display: inline; list-style-type: none;">
    <IMG src="thumbnail/EOS%2030D3045.jpg"/>
  </LI>
  <LI style="margin: 0pt 0pt 0pt 5px; padding: 0pt; display: inline; list-style-type: none;">
    <IMG src="thumbnail/EOS%2030D3058.jpg"/>
  </LI>
  <LI style="margin: 0pt 0pt 0pt 5px; padding: 0pt; display: inline; list-style-type: none;">
    <IMG src="thumbnail/EOS%2030D3061.jpg"/>
  </LI>
  <LI style="margin: 0pt 0pt 0pt 5px; padding: 0pt; display: inline; list-style-type: none;">
    <IMG src="thumbnail/EOS%2030D3225.jpg"/>
  </LI>
</UL>

Auriez-vous une idée?

Merci par avance.
Modifié par bbp (16 Aug 2007 - 17:16)

Bonjour,

Tes li sont en display: inline, et les images sont donc alignées sur la ligne de base du texte. Certains navigateurs gardent de la place pour les lettres descendantes (p, q, g).

Pour éviter ce problème, essayer un vertical-align: bottom sur les images, et si ça ne marche pas, essayer de remplacer le display: inline par un float: left avec les images en display: block.
Modifié par Lanza (16 Aug 2007 - 16:42)

Hello,

Je ne sais pas pour ta question ^^
mais si je peux me permettre un conseil:

<IMG src="thumbnail/EOS%2030D3058.jpg"/>

évite les signes +"*ç%&/()=?`... ... dans le nomage de tes images !

EOS%2030D3058.jpg --> eos_2030D3058.jpg
ou quelque chose de plus exaustif (si le cadre le permet) --> place_vandome.jpg

mais c'est toi le patron ! tu n'es pas obligé de suivre mes conseil !

J'éspère que ton problème trouvera une jolie solution et qu'ils fassent tout plein de petits !

chum

Merci pour vos réponses.

Et bien joué Lanza, les deux solutions sont viables en ajoutant un clear:"left" au niveau du <ul> pour la méthode du float. J'ai remarqué qu'on peut remplacer le display:"block" de cette méthode par le vertical-align:"bottom" dans ce cas là aussi.

J'ai donc choisi le simple ajout du vertical-align, moins de modifications à faire.

Chum je prends ta remarque en compte mais ce n'est qu'un détail parmis tout le reste . Petit conseil néanmoins, je ne sais pas pour les autres mais en ce qui me concerne, très souvent, pas aujourd'hui curieusement je suis de bonne humeur, je pense que c'est très agaçant d'avoir une réponse sur toute autre chose alors qu'on butte sur un problème bien spécifique depuis des heures. Mais merci tout de même tu as l'âme de quelqu'un qui veut aider, ça fait plaisir à voir sur un forum.

bbp a écrit :
Chum je prends ta remarque en compte mais ce n'est qu'un détail parmis tout le reste . Petit conseil néanmoins, je ne sais pas pour les autres mais en ce qui me concerne, très souvent, pas aujourd'hui curieusement je suis de bonne humeur, je pense que c'est très agaçant d'avoir une réponse sur toute autre chose alors qu'on butte sur un problème bien spécifique depuis des heures. Mais merci tout de même tu as l'âme de quelqu'un qui veut aider, ça fait plaisir à voir sur un forum.

Moi je trouve bien ce genre de remarques, qui peuvent parfois être très utiles, sur des choses qu'on a oublié ou qu'on peut mieux faire, ça fait partie de l'apprentissage. En attendant la solution du problème, ça donne parfois au moins de quoi faire.