[RÉGLÉ] Histoire de display: inline-block hérité. Comment le "contrer" ?

[FlodAriege]

Bonsoir,

Je n'avais jamais remarqué car j'utilise principalement Mozilla quand je travaille sur mon site, mais je viens de constater que sous Chrome et sous Edge, j'ai un problème d'alignement de mes boutons de partage.

Sous Mozilla, tout va bien, tout est bien aligné :


Mais sous Chrome (ainsi que sous Edge), les boutons de partage se décalent légèrement vers le bas :


En examinant le css de plus près, je m'aperçois qu'il suffit de désactiver une propriété héritée d'une classe de liste pour que les choses rentrent dans l'ordre :


Je ne peux pas voir cette propriété héritée quand je regarde sous Mozilla. Et à y regarder de plus près avec Chrome, la ligne moz display: inline-stack; existe pourtant, mais pour une raison inconnue elle n'est pas respectée par Mozilla.

Question : comment faire pour contrer cet héritage ?

J'ai essayé :
- d'ajouter !important sur les lignes où le display est réglé sur block
- de régler le display sur inline !important
- d'ajouter un vertical-align: top

Aucune de ces manœuvres n'a le moindre effet...

Une URL pour voir ça de plus près : (ôter les espaces de part et d'autre du nom de domaine) :
"http://www. rouchenergies.fr /articles/la-transition-energetique-est-une-chance.html"

Merci d'avance pour le coup de main
Bonne nuit

[marie-louise]

Re : Histoire de display: inline-block hérité. Comment le "contrer" ?

Bonjour,

J'espère ne pas dire de bêtise, je débute dans le CSS donc je fais mes essais, mais si tu règle sur block, ca semble alligné sous chrome

[FlodAriege]

Re : Histoire de display: inline-block hérité. Comment le "contrer" ?

Bonjour Marie-Louise,

Désolée, je n'arrive pas à lire ta capture d'écran : quelle classe as-tu réglé sur display: block; ?
Quand j'essaie sur la classe flexi-socials, ça ne change rien.
J'ai déjà réglé la class flexitoolbar (qui encadre la flexi-socials) sur block, mais ça n'a rien changé non plus...
Je désespère de trouver la bonne ligne...

Merci d'avance de ta précision

[ced1870]

Re : Histoire de display: inline-block hérité. Comment le "contrer" ?

salut
il y a deux choses :
1/ la zone est trop petite pour le texte qu'elle contient
2/ le conteneur n'a pas le bon display.

Voici les étapes de résolution qui semblent fonctionner
dans le fichier

http://www.rouchenergies.fr/components/com_flexicontent/templates/default/css/item.css

1/ ligne 120 edites la classe

.twocols .flexi.value

et mets les marges à 0

margin:0

2/ ligne 67 edites la classe

.infoblock ul li.flexi

et change le display en

display:block;

attention ce sont des classes génériques donc ça peut aussi jouer sur d'autres éléments, à toi ensuite de peaufiner si ça marche
CEd

[marie-louise]

Re : Histoire de display: inline-block hérité. Comment le "contrer" ?


Bonjour,

Un spécialiste est passé donc la t'es sauvée, moi j'avais mis la ligne css 67 .infoblock ul, enfin je viens de refaire le test, même si j'avais vérifié que mon image était agrandissable hier, le fait de l'avoir mis ici change tout et je suis à un autre endroit. Je me souvenais avoir cherché du coté de j'aime, vu que le soucis est dans ce coin

Edit : viens de relire la réponse précédente et on pense la même chose question ligne !

[FlodAriege]

Re : Histoire de display: inline-block hérité. Comment le "contrer" ?

Merci !
Il m'a suffi de mettre les marges à zéro pour résoudre le problème.

Je n'ai pas voulu changer le display, car je ne sais pas trop où ça aurait pu avoir des répercussions indésirables (c'est pourquoi je demandais comment casser cet héritage de propriétés, ce qui m'aurait évité de changer la classe "supérieure").

J'ai aussi fait un test en désactivant temporairement les boutons envoyer et imprimer, mais bien que cela réduise considérablement la largeur du contenu, ça ne changeait rien au décalage vers le bas des boutons de partage.

Par contre, la suppression des marges a parfaitement fonctionné, merci

Bonne journée !

Flo

[ced1870]

Re : Histoire de display: inline-block hérité. Comment le "contrer" ?

cool
merci de passer ton sujet en "Réglé"

[FlodAriege]

Re : Histoire de display: inline-block hérité. Comment le "contrer" ?

Oui, promis, dès que je serai sur PC (pas trouvé comment faire depuis l'appli iphone).