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

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    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é :
    Cliquez sur l'image pour l'afficher en taille normale

Nom : toolbar-mozilla.jpg 
Affichages : 1 
Taille : 52,8 Ko 
ID : 1823522

    Mais sous Chrome (ainsi que sous Edge), les boutons de partage se décalent légèrement vers le bas :
    Cliquez sur l'image pour l'afficher en taille normale

Nom : toolbar-chrome.jpg 
Affichages : 1 
Taille : 42,8 Ko 
ID : 1823523

    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 :
    Cliquez sur l'image pour l'afficher en taille normale

Nom : toolbar-chrome-css.jpg 
Affichages : 1 
Taille : 102,2 Ko 
ID : 1823524

    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
    Dernière édition par FlodAriege à 03/09/2015, 18h33
    Flo, Ariège

    Il n'y a que celui qui a honte d'apprendre qui a peur de demander

  • #2
    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 chromeCliquez sur l'image pour l'afficher en taille normale

Nom : block.jpg 
Affichages : 1 
Taille : 32,7 Ko 
ID : 1805085

    Commentaire


    • #3
      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
      Flo, Ariège

      Il n'y a que celui qui a honte d'apprendre qui a peur de demander

      Commentaire


      • #4
        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


        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
        Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
        http://www.template-creator.com Outil de création de templates
        Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

        Commentaire


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

          Cliquez sur l'image pour l'afficher en taille normale

Nom : inflblock67.PNG 
Affichages : 1 
Taille : 10,6 Ko 
ID : 1805087
          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 !
          Dernière édition par marie-louise à 03/09/2015, 10h02

          Commentaire


          • #6
            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
            Flo, Ariège

            Il n'y a que celui qui a honte d'apprendre qui a peur de demander

            Commentaire


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

              cool
              merci de passer ton sujet en "Réglé"
              Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
              http://www.template-creator.com Outil de création de templates
              Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

              Commentaire


              • #8
                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).
                Flo, Ariège

                Il n'y a que celui qui a honte d'apprendre qui a peur de demander

                Commentaire

                Annonce

                Réduire
                Aucune annonce pour le moment.

                Partenaire de l'association

                Réduire

                Hébergeur Web PlanetHoster
                Travaille ...
                X