Misalignment of Facebook & Twitter buttons

Question

The page contains two buttons, from twitter and from facebook.

What I'm observing in Firefox 3.5.15 is:

While the page is loading, the buttons are more or less aligned (I mean their bottom sides)
When the page is loaded, the facebook button moves a few pixels down, so that it's bottom side is lower than the bottom side of the twitter button.
If I reload the page, the buttons are again aligned, and remain in this state even after the page is loaded.

Can someone please explain what's going on and how to fix it?

score 52 · Answer 1 · answered Sep 12 '11 at 18:39

52

I fixed this by adding vertical-align:top (This is when using their new HTML5 markup). My facebook button code now looks like:

<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>

I also had to add zoom:1 and *display:inline IE7 hack so that buttons show side by side

answered Sep 12 '11 at 18:39

vandre

778
6
16

13

They should put your face on money. Thank you. – ppp Jul 19 '12 at 14:56
Best answer for sure and still the working answer as of 27 May 2014. – Karl May 27 '14 at 15:19
Worked for me too. Thanks! – Anmol Gupta Aug 02 '15 at 10:45
1

Nice answer, I tried the one marked as solution and it didn't work, good job! – Alex May 18 '16 at 17:51

score 51 · Accepted Answer · edited Feb 05 '13 at 16:00

51

Found the style that is pushing it down ..

If you use FireBug and scroll down to the iframe within the FB button.

This CSS style

.fb_iframe_widget iframe

has this element

vertical-align: text-bottom;

That's the one who's pushing it down.

You can override the CSS style with the following combo of selector and !important

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

edited Feb 05 '13 at 16:00

DMTintner

14,405
5
35
32

answered Jan 24 '11 at 20:35

Guðmundur Þór Magnússon

633
7
10

1

I actually implemented this solution a couple of weeks ago and it worked perfectly (hence the upvote) however I just noticed today (16th May 2013) that the buttons were misaligned again. I think Facebook have made some changes, and now if I _remove_ the `text-bottom` declaration from my `.twitter-share-button` class, they line up perfectly again. – indextwo May 16 '13 at 14:10
6

For a 2015 solution, check "Dan dot net"'s great clean answer – consideRatio Jan 13 '15 at 23:12

score 50 · Answer 3 · answered Feb 20 '14 at 21:01

50

I just enclosed all my icons in a div and then set the line height on that div so that they all lined up (since they are all the same height and some are aligned with the top and some the bottom)

<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>

Then the CSS

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

answered Feb 20 '14 at 21:01

Dan dot net

6,119
5
28
25

7

2015 : great sanswer! – consideRatio Jan 13 '15 at 23:12
1

2017: Still best answer. – leymannx Apr 18 '17 at 20:22
1

I had to use 11px. Tested in 3 browsers, very similar setup. What gives? – greeble31 Sep 06 '17 at 01:05
1

It has changed. It is now 11px. – Houman May 31 '19 at 07:49
1

2019 Work for me only after removing #product-details-page Also use 11px – brucemax Oct 28 '19 at 19:19

score 8 · Answer 4 · answered Feb 05 '11 at 10:32

I fixed this by adding position: relative; top: 4px; to the style attribute of the facebook iframe.

So, it looks like this:

<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>

An imperfect solution, but it works.

Worked like a charm after much frustration. – batoutofhell Jan 26 '15 at 22:04 — batoutofhell, Jan 26 '15 at 22:04

score 7 · Answer 5 · answered Nov 17 '13 at 03:01

7

It seems that, as of today at least, that the issue comes from an odd alignment of the <span> tag that the javascript generates within the .fb-share-button <div>. Here's my fix:

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

answered Nov 17 '13 at 03:01

Steven Clontz

945
1
11
20

1

As of 20 Nov 2014 this is the only solution I could get to work. – JWPersh Nov 20 '14 at 16:06

score 3 · Answer 6 · answered Nov 02 '12 at 10:17

3

I realise that this questions was posted some time ago, but here is the solution that I use.

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

answered Nov 02 '12 at 10:17

Digital Robot Gorilla

397
1
5
13

score 2 · Answer 7 · answered Oct 20 '15 at 02:13

2

This worked for me as a charm:

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

answered Oct 20 '15 at 02:13

andres.arslanian

101
1
6

Amit · Answer 8 · 2011-01-23T17:26:59.003

2

You can easily solve this issue with CSS:

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

EIDT: If you want them to be centered, simply wrap them in a div (which they already are wrapped with, give that div a class or an ID. For example, let's give it a class of twfb for twitter/facebook. Now in the CSS we'll declare a width and automatic margins as so:

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

EDIT 2: To remove the large margin from the facebook, simply add this to your CSS:

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

That should align them nice and close to each other.

That should do it!

Good luck

edited Jan 23 '11 at 17:26

answered Jan 22 '11 at 22:49

Amit

7,688
17
53
68

You could be more specific with the iframe by adding its class, but I hope you don't have that many iframes there... – Amit Jan 22 '11 at 22:49
Thanks for the answer. I want these buttons to be centered inside a `div` -- can your solution be adapted to this? – Roman Cheplyaka Jan 22 '11 at 23:03
Thanks. Here's what I got after playing with floating: http://ro-che.info/ccc/11.html. Still not exactly what I wanted (the buttons seem to be aligned by their upper rather than lower side), but what bothers me more is a large space before the facebook button. How do I get rid of it? Also, could you please explain (or point me to an explanation) why floating helps here? – Roman Cheplyaka Jan 23 '11 at 15:52
Also, I just checked in Konqueror -- the text starts to the right of the buttons rather than below them. How to fix this? – Roman Cheplyaka Jan 23 '11 at 16:05
@Roman: also props on very comical comic strips. I fully enjoyed them! – Amit Jan 23 '11 at 17:32

score 2 · Answer 9 · answered Dec 20 '17 at 09:23

2

Twitter and facebook button can be fixed vertically aligned

 vertical-align: top !important;

answered Dec 20 '17 at 09:23

Pan Bouradas

179
1
6

DMTintner · Answer 10 · 2013-02-05T15:57:43.137

The problem here is not the position, height or any other CSS, but rather the inline-block elements taking the wrong vertical alignment. The facebook element is vertial-align: top and the twitter element is vertical-align: bottom. Can all be fixed with just one line of CSS, but have to use the correct selector and !importantoverride JS applied inline styles.

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

Raymond Ma · Answer 11 · 2015-09-24T17:34:12.630

1

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

worked for me

edited Sep 24 '15 at 17:34

answered Sep 24 '15 at 04:42

Raymond Ma

71
1
3

When I came up with the solution I was just hacking away.. but 'initial' is essentially the default value of baseline for the vertical-align property. @nicorellius's answer explains FB was using vertical-align: bottom for the spans. – Raymond Ma Sep 29 '15 at 22:59
1

CSS does not allow nested brackets, does it? This works for me: `fb_iframe_widget span { vertical-align: initial !important; }` – Mark Aug 31 '16 at 18:47
1

sorry I wrote it in scss. The css syntax is what @Mark has. – Raymond Ma Sep 14 '16 at 22:50

polarblau · Answer 12 · 2011-01-23T17:36:10.057

1

I can't tell you what's going on in there and I don't even want to think about what < fb:headache > does there, but you should be able to resolve this issue by floating the iframe for the twitter button left and adding some margin-right to get the original look back.

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

It's a little hackish, but should do.

UPDATE

.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;
}

edited Jan 23 '11 at 17:36

answered Jan 22 '11 at 22:25

polarblau

17,649
7
63
84

Thanks for the answer. I want these buttons to be centered inside a `div` -- can your solution be adapted to this? – Roman Cheplyaka Jan 22 '11 at 23:02
Well, I'd guess that you would have to have another div wrapping the buttons, just wide enough to fit them both and then use `margin: 0 auto` to center this div within it's parent div. – polarblau Jan 22 '11 at 23:14
Thanks. Here's what I got after playing with floating: http://ro-che.info/ccc/11.html. Still not exactly what I wanted (the buttons seem to be aligned by their upper rather than lower side), but what bothers me more is a large space before the facebook button. How do I get rid of it? Also, could you please explain (or point me to an explanation) why floating helps here? – Roman Cheplyaka Jan 23 '11 at 15:53
Also, I just checked in Konqueror -- the text starts to the right of the buttons rather than below them. How to fix this? – Roman Cheplyaka Jan 23 '11 at 16:05
Check my updated. The elements have a different size which makes it impossible to align the both on top and bottom. I would tweak it, using e.g. margins to fit your needs. – polarblau Jan 23 '11 at 17:37

score 0 · Answer 13 · answered Feb 08 '14 at 05:54

I know there have been many answers, but since I struggled with this and none here worked for me, I thought I'd add my 2 cents... As has been mentioned, the span has a vertical-align: bottom; and you need to override this. I must say, even though it runs counter to CSS theory, it would really be nice if you could simply "turn off" a CSS rule like this one. I mean, what the hell FB? Icons working one day; but not the next. That is the stupidest thing I've ever heard of, ever.

Anyway...

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

...did it for me.

score 0 · Answer 14 · answered Oct 21 '14 at 22:05

Then back to the first solution here, a bit.

"top" is also ok.

This is my solution for the joomla plugin (see http://www.compago.it/software/41-compago-software/347-facebook-twitter-google1-plugin-for-joomla.html):

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

score 0 · Answer 15 · edited May 23 '17 at 12:26

0

I solved this by taking Guðmundur Þór Magnússon's answer and adding margin-bottom: -2px !important; to the CSS rule:

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

edited May 23 '17 at 12:26

Community

1
1

answered Nov 11 '15 at 19:51

Adam Denoon

329
1
15

score 0 · Answer 16 · answered Feb 25 '16 at 11:13

Use this code here to make it work, refer to the vertical-align part. Change the number accordingly (Current is 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>

score 0 · Answer 17 · answered Dec 10 '17 at 04:50

All I did was add the CSS to my page:

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

This is a bit less opinionated than some of the answers here and isolates the change to only undoing the height adjustment on the Facebook share icon.

alex.pulver · Answer 18 · 2020-10-08T14:01:48.417

Now in September 2020 a new change from Facebook. The button height is always 28px for small or large button.

To align the buttons:

Step 1: Place both buttons inside a div

<div class="socialMedia">
     <div id="fb-root"></div>
     <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0" nonce="1lGOwZCs"></script>
     <div class="fb-like" style="padding-right:4px" data-href=...></div>
     <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-url=...>Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Step 2a: Set the line-height of the div as 11px
or
Step 2b: Set font-size as 1px

.socialMedia {
    float: right;
    width: 250px;
    display: block;
    padding-top: 25px;
    text-align: right;
    line-height: 11px
}

or

<div class="fb-like" style="font-size:1px;display:inline-block;"...</div>

Step 3: Set height as 20px
The generated span inside the Facebook div is force to have the same height as Twitter iframe of 20px:

div.fb_iframe_widget > span {
    height: 20px !important
}

The above values are for the small button. For the large buttons, the values must be changed properly.

Misalignment of Facebook & Twitter buttons

18 Answers18

Linked