web-dev-qa-db-fra.com

Désalignement 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 veux dire leurs 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 son côté inférieur est inférieur au côté inférieur du bouton Twitter.
  3. Si je recharge la page, les boutons sont à nouveau alignés et restent dans cet état même après le chargement de la page.

Quelqu'un peut-il expliquer ce qui se passe et comment y remédier?

htmlcssfacebooktwitter
44
Roman Cheplyaka

Trouvé le style qui le 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 vers le bas.

Vous pouvez remplacer le style CSS avec la combinaison de sélecteurs suivante et! Important

.Twitter-share-button[style] { vertical-align: text-bottom !important; }
51
Guðmundur Þór Magnússon

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

<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-     show-faces="false" style="vertical-align:top;zoom:1;*display:inline"> </div>

J'ai aussi dû ajouter zoom: 1 et * display: hack IE7 en ligne pour que les boutons s'affichent côte à côte

52
vandre

Je viens de placer toutes mes icônes dans un div, puis de définir la hauteur de la ligne sur ce div afin qu'elles soient toutes alignées (car elles sont toutes de la même hauteur et certaines sont alignées avec le haut et d'autres en bas)

<div class="product-social-links">
    <a href="//www.pinterest.com/pin/create/but [...] >
       <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
    </a>

    <div class="fb-like" data-href="@Request.Url.AbsoluteUri" [...] ></div>

    <a href="https://Twitter.com/share" class="Twitter-share-button" [...] >Tweet</a>
</div>

Ensuite, le CSS

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

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

Ainsi, cela ressemble à ceci:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&amp;layout=box_count&amp;show_faces=true&amp;width=110&amp;action=recommend&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="position: relative; top: 4px; border:none; overflow:hidden; width:110px; height:65px;" allowTransparency="true"></iframe>

Une solution imparfaite, mais ça marche.

8
Gezim

Il semble qu'à partir d'aujourd'hui, le problème vient d'un étrange alignement du <span> tag que le javascript génère dans le .fb-share-button <div>. Voici ma solution:

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

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;
      }
3
Digital Robot Gorilla

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, enveloppez-les simplement dans un div (avec lequel ils sont déjà enveloppés, donnez à ce div une classe ou un ID. Par exemple, donnons-lui une classe de twfb pour Twitter/facebook. Maintenant dans le CSS, nous allons déclarer une largeur et des marges automatiques comme suit:

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

EDIT 2: Pour supprimer la grande marge du facebook, ajoutez simplement ceci à votre CSS:

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

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

Ça devrait le faire!

Bonne chance

2
Amit

Cela a fonctionné pour moi comme un charme:

.Twitter-share-button[style] { vertical-align: middle !important; }
2
andres.arslanian

Le problème ici n'est pas la position, la hauteur ou tout autre CSS, mais plutôt les éléments de bloc en ligne prenant le mauvais alignement vertical. L'élément facebook est vertical-align: top et l'élément Twitter est vertical-align: bottom. Peut tous être corrigés avec une seule ligne de CSS, mais doit utiliser le bon sélecteur et les styles en ligne appliqués! Importantoverride JS.

iframe[style] { /* to select the outer-most element of the Twitter button */
    display: inline-block;
    vertical-align: bottom !important;
}
1
DMTintner
.fb_iframe_widget {
  span {
   vertical-align: initial !important;
  }
}

travaillé pour moi

1
Raymond Ma

Le bouton Twitter et Facebook peut être fixé aligné verticalement

 vertical-align: top !important;
1
Pan Bouradas

Je ne peux pas vous dire ce qui se passe là-dedans et je ne veux même pas penser à ce que < fb:headache > le fait, mais vous devriez être en mesure de résoudre ce problème en faisant flotter l'iframe du bouton Twitter vers la gauche et en ajoutant une marge à droite pour retrouver l'aspect d'origine.

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

C'est un peu hackish, mais ça devrait le faire.

MISE À 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;
}
1
polarblau

Je sais qu'il y a eu beaucoup de réponses, mais depuis que je me débattais avec cela et qu'aucune ici ne fonctionnait pour moi, j'ai pensé ajouter mes 2 cents ... Comme cela a été mentionné, le span a un vertical-align: bottom; et vous devez remplacer cela. Je dois dire que même si cela va à l'encontre de la théorie CSS, ce serait vraiment bien si vous pouviez simplement "désactiver" une règle CSS comme celle-ci. Je veux dire, c'est quoi ce bordel FB? Icônes travaillant un jour; mais pas le suivant. C'est la chose la plus stupide dont j'ai jamais entendu parler.

En tous cas...

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

... l'a fait pour moi.

0
nicorellius

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

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

Revenons ensuite à la première solution ici, un peu.

"top" est également ok.

Ceci est ma solution pour le plugin 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;
}
0
Klas Wirholm

Tout ce que j'ai fait, c'est d'ajouter le CSS à ma page:

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

C'est un peu moins d'opinion que certaines des réponses ici et isole le changement pour annuler uniquement le réglage de la hauteur sur l'icône de partage Facebook.

0
digitalfoo

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

<div class="fb-like" data-width="30" data-layout="button" data-action="like" data-show-faces="false" data-share="true" style="vertical-align:7px"></div>
0
Benjamin Alexander Cai