Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Positionnement erroné de l'image dans une liste à boulets

3 réponses
Avatar
Claude Schneegans
Re-bonjour.

J'ai décidé aujourd'hui de faire un peu le ménage dans mon système de
gestion de contenu, et j'ai bien peur d'avoir perdu ma journée, à cause
d'IE :-(

Voir l'exemple suivant :
http://www.contentbox.com/claude/test/test2.htm

Ces listes utilisent une image pour le boulet.
La première a l'air correct, mais la seconde a en plus le style
"list-style-position: inside".
Le boulet est en effet repoussé à l'intérieur, mais d'abord il n'est pas
aligné sur la marge,
en plus, il est complètement collé sur le texte qui suit, ça fait très
caca :-(

Avec les autres navigateurs, ça va très bien.

Qqun connaîtrait un « travail-autour » ?

3 réponses

Avatar
MCI
Bonjour !

Pour voir ce qui accroche, faire "Affichage" + "Source", et analyser le
code HTML sous-jacent.

--
@-salutations
--
Michel Claveau
Avatar
MCI
Re !

Lorsque les marqueurs ("boulets") sont à l'intérieur (inside), ils font
bloc avec le texte de l'item. Il est donc normal qu'il n'y ait plus
d'espace entre le marqueur et le texte.
De plus la position gauche de la liste étant inchangée, on y retrouve
l'espace manquant.
Cela saute aux yeux, si on utilise l'astuce décrite par Gilles : mettre
un petit cadre coloré autour des objets.

--
@-salutations
--
Michel Claveau
Avatar
Claude Schneegans
>>ils font bloc avec le texte de l'item. Il est donc normal qu'il n'y




ait plus d'espace entre le marqueur et le texte.

Non, ce n'est pas normal. Je parle en termes d'esthétique typographique,
pas en termes de programmeur. Avec IE, l'espace entre l'image et le
texte n'est pas le même pour le boulet de défaut que pour une image de
même dimension, c'est ça qui est anormal.
Va voir par exemple
http://www.contentbox.com/claude/test/test3.htm

On voit qu'avec le boulet de défaut, il y a un espace entre le boulet et
le texte, ce qui est normal, et cet espace est le même que le boulet
soit inside ou outside, ce qui est également normal. (listes 1 & 2).

Avec un boulet image, l'espace entre le boulet et le texte est correct
pour le type outside (liste 3),
mais on dirait qu'il se retrouve AVANT le boulet au lieu de APRÈS dans
le cas inside, ce qui est anormal et très vilain. (liste 4).

Va voir la même page avec Opera, Safari, Glouglou-Chrome, Mords-zy-la,
et tu verras que tous l'affichent correctement.