Misalignment of Facebook & Twitter buttons

Question

Here's a minimal example of my problem. It 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?

Guðmundur Þór Magnússon · Accepted Answer · 2011-01-23 22:58:10Z

0

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're gonna have to dig into the FB developers API to find how to overwrite the CSS styles.

answered Jan 23, 2011 at 22:58

2061 silver badge4 bronze badges

You rock, thanks a lot! I was able to overwrite it in my own CSS using more specific selector.
– user4807
Commented Jan 24, 2011 at 7:07
By the way, I also asked this question on stackoverflow: stackoverflow.com/questions/4770372/…. If you copy your answer there, I'll be happy to accept it there. (If you don't have an account yet, you can login there and link it to your webmasters account). Otherwise I'll have to answer my own question with a link to this answer.
– user4807
Commented Jan 24, 2011 at 7:14
Also, do you have an idea why it behaves differently after a page is reloaded? I observe this even after I fixed that property -- only now after reload it goes higher than other buttons. See e.g. ro-che.info/ccc/11.html
– user4807
Commented Jan 24, 2011 at 7:39
I've copied the answer :-)
– Guðmundur Þór Magnússon
Commented Jan 24, 2011 at 20:36

Add a comment |

1 Answer 1