Mauvais alignement des boutons Facebook et Twitter

La page contient deux boutons, de twitter et de facebook.

Ce que j’observe dans Firefox 3.5.15 est:

  1. Pendant le chargement de la page, les boutons sont plus ou moins alignés (je parle des côtés inférieurs)
  2. Lorsque la page est chargée, le bouton facebook se déplace de quelques pixels vers le bas, de sorte que sa face inférieure est inférieure à la partie inférieure du bouton twitter.
  3. Si je recharge la page, les boutons sont à nouveau alignés et restnt dans cet état même après le chargement de la page.

Quelqu’un peut-il s’il vous plaît expliquer ce qui se passe et comment y remédier?

J’ai trouvé le style qui pousse vers le bas ..

Si vous utilisez FireBug et faites défiler jusqu’à l’iframe dans le bouton FB.

Ce style CSS

.fb_iframe_widget iframe 

a cet élément

 vertical-align: text-bottom; 

C’est celui qui le pousse.

Vous pouvez remplacer le style CSS avec le combo suivant de sélecteur et! Important

 .twitter-share-button[style] { vertical-align: text-bottom !important; } 

J’ai corrigé cela en ajoutant vertical-align: top (c’est-à-dire en utilisant leur nouveau balisage HTML5). Mon code de bouton facebook ressemble maintenant à:

  

Je devais aussi append un zoom: 1 et * display: IE7 en ligne pirater pour que les boutons s’affichent côte à côte

Je viens de joindre toutes mes icons dans un div puis de définir la hauteur de la ligne sur ce div afin qu’elles soient toutes alignées (puisqu’elles ont toutes la même hauteur et que certaines sont alignées avec le haut et d’autres en bas)

  

Alors le CSS

 #product-details-page .product-social-links { line-height: 10px; } 

J’ai corrigé cela en ajoutant la position: relative; top: 4px; position: relative; top: 4px; à l’atsortingbut style de l’iframe facebook.

Donc, ça ressemble à ceci:

  

Une solution imparfaite, mais ça marche.

Il semble qu’au moins aujourd’hui, le problème vienne d’un alignement étrange de la générée par le javascript dans le .fb-share-button

. Voici mon correctif:

 .fb-share-button span { top: -6px; } 

Je me rends compte que cette question a été publiée il y a quelque temps, mais voici la solution que j’utilise.

 .twitter-share-button { position:relative; top:6px; } 

Vous pouvez facilement résoudre ce problème avec CSS:

iframe { float: left; padding-right: 10px; }

EIDT: Si vous voulez qu’ils soient centrés, encapsulez-les simplement dans un div (avec lequel ils sont déjà encapsulés, donnez-leur une classe ou un identifiant. Par exemple, donnons-lui une classe de twfb pour twitter / facebook). le CSS va déclarer une largeur et des marges automatiques comme suit:

.twfb { width: 120px; margin: 0 auto; }

EDIT 2: Pour supprimer la grande marge de Facebook, ajoutez simplement ceci à votre CSS:

.fb_edge_widget_with_comment { margin-left: -26ppx; }

Cela devrait les aligner gentiment et proches les uns des autres.

Ça devrait le faire!

Bonne chance

Cela a fonctionné pour moi comme un charme:

 .twitter-share-button[style] { vertical-align: middle !important; } 

Je ne peux pas vous dire ce qui se passe là-bas et je ne veux même pas penser à ce que fait < fb:headache > , mais vous devriez être capable de résoudre ce problème en faisant glisser l’iframe du bouton twitter et en ajoutant une marge-droite pour retrouver l’original.

 iframe.twitter-share-button { float: left; margin-right: 4px; } 

C’est un peu piraté, mais devrait le faire.

METTRE À JOUR

 .fb_iframe_widget { display: block !important; } // leave important away if possible! // change main.css / line 41: div.text { clear: left; margin: 0 auto; padding: 35pt 5pt 15pt; width: 40em; } 

Le problème ici n’est pas la position, la hauteur ou tout autre CSS, mais plutôt les éléments en ligne qui prennent un mauvais alignement vertical. L’élément facebook est vertial-align: top et l’élément twitter est vertical-align: bottom. Tout peut être corrigé avec une seule ligne de CSS, mais vous devez utiliser le bon sélecteur et! Importantoverride JS a appliqué les styles en ligne.

 iframe[style] { /* to select the outer-most element of the twitter button */ display: inline-block; vertical-align: bottom !important; } 

 .fb_iframe_widget { span { vertical-align: initial !important; } } 

travaillé pour moi

Le bouton Twitter et facebook peut être aligné verticalement

  vertical-align: top !important; 

Je sais qu’il y a eu beaucoup de réponses, mais depuis que j’ai eu du mal avec ça et qu’aucune n’a fonctionné ici, j’ai pensé append mes 2 centimes … Comme il a été mentionné, la span a un vertical-align: bottom; et vous devez remplacer cela. Je dois dire que, même si cela est contraire à la théorie CSS, ce serait vraiment bien si vous pouviez simplement “désactiver” une règle CSS comme celle-ci. Je veux dire, quel enfer FB? Icônes travaillant un jour; mais pas la suivante. C’est la chose la plus stupide de ma vie.

En tous cas…

 .fb-like span { /* baseline is default, so it negates bottom*/ vertical-align: baseline !important; } 

… l’a fait pour moi

Puis revenons à la première solution ici, un peu.

“top” est également correct.

Voici ma solution pour le plug-in joomla (voir http://www.compago.it/software/41-compago-software/347-facebook-twitter-google1-plugin-for-joomla.html ):

 .fb_iframe_widget span { vertical-align: top !important; } 

J’ai résolu ce problème en prenant la réponse de Guðmundur Þór Magnússon et en ajoutant margin-bottom: -2px !important; à la règle CSS:

 .twitter-share-button[style] { vertical-align: text-bottom !important; margin-bottom: -2px !important; } 

Utilisez ce code ici pour le faire fonctionner, reportez-vous à la partie alignement vertical. Changez le nombre en conséquence (courant est 7):

 

Tout ce que j’ai fait a été d’append le CSS à ma page:

 div.fb_iframe_widget > span { vertical-align: unset !important; } 

Ceci est un peu moins perceptible que certaines des réponses ici et isole le changement à annuler uniquement le réglage de la hauteur sur l’icône de partage Facebook.