28172 sujets

CSS et mise en forme, CSS3

Bonjour

Je sèche depuis de nombreuses heures sur un positionnement css incompréhensible (en tout cas par moi). Le mystère concerne le « panneau en images » qui se trouve en tête de la page d'accueil de mon blog : http://cdarmangeat.blogspot.com.

Le code a été récupéré (puis modifié par mes soins) à partir d'un layout pour blogger.

Le panneau est constitué d'un conteneur (#HTML2). A l'intérieur, se trouvent successivement une classe widget-content, puis un ul et des li. Et jusque là, tout va bien.

Mais à l'intérieur de chaque li, il y a un .featured-inner, et c'est là que les choses se gâtent : sur Chrome et Edge (mais pas sur Firefox !), ce .featured-inner, ainsi que tous les éléments qu'il contient, se voit décalé vers le bas d'une trentaine (?) de pixels par rapport au conteneur li. C'est moche (un peu) et énervant (beaucoup !), car impossible de trouver la raison pour laquelle un tel résultat est produit.

Pour visualiser le bug, j'ai posé provisoirement une border flashy verte autour du li, et une rouge autour du featured-inner.

Si une bonne âme pouvait me sortir l'arrière-train des ronces, je lui en serai gré ! Merci d'avance à toutes celles et ceux qui essayeront...
Modifié par CDarmangeat (26 Nov 2017 - 08:22)
C'est cela ! Un grand merci !
Mais pourquoi un décalage a priori vers la droite (en raison des puces) se traduisait-il par un décalage vers le bas sans décalage vers la droite, cela reste pour moi assez mystérieux.
Encore merci en tout cas.
Peut-être que c'est en rapport avec la largeur des <li> et/ou le moteur de rendu des navigateurs. faudra creuser.....

Si le topic est résolu, merci de sélectionner la meilleure réponse, ce qui pourrait aider les autres éventuellement et si vous trouvez la source du "bug", n'hésitez pas à partager!