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:

  1. While the page is loading, the buttons are more or less aligned (I mean their bottom sides)
  2. 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.
  3. 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?


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.

  • You rock, thanks a lot! I was able to overwrite it in my own CSS using more specific selector.
    – user4807
    Jan 24 '11 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
    Jan 24 '11 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
    Jan 24 '11 at 7:39
  • I've copied the answer :-) Jan 24 '11 at 20:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy