Facebook has changed height of login button, template design breaks on top

Question

Facebook changed again something. This extra line as you see breaks the design on top, see: http://www.gute-mathe-fragen.de/

I tried setting other CSS without any luck, e.g.:

.qa-nav-user-facebook-login { width:100px important!; }

maybe someone else has a solution for that?

 

PS: +1 of facebook's arbitrary changes. +1 reason to get rid of them.... yes, I am still in hope for another good service.

Comments

Does it work if you just make the surrounding box a little wider? If I widen the iframe in Chrome it fits fine, maybe there is some way you can tell it how wide to make it.

---

unfortunately there is no iframe but javascript.

Strange enough, load my site in Firefox, the Facebook script extends pixelwise the length of the button. Looks like a bug...

site: http://www.gute-mathe-fragen.de/

---

I meant the div that surrounds the Javascript. Try with "qa-nav-user". FB is obviously picking up a width from somewhere...

---

The button is in 1 line now, but if you load the site, it pushes other divs down, then "recovers" to one line. As far as I could see FB is not picking up a height from one of the divs. I found this instead:

"The plugin dynamically sizes its height; for example, if you specify a maximum of four rows of faces, and there are only enough friends to fill two rows, the height of the plugin will be only what is needed for two rows of faces." http://developers.facebook.com/docs/reference/plugins/login/

Trying to tell Facebook not to show any friends: <div class="fb-login-button" data-show-faces="false" data-width="100"></div>
does not change anything. Still have this unnice effect (this is one reason why I removed the FB-login now).

Answer 1

please,
I need to configure your FB login to my site
http://sualek.com v1.3
can you make annually explanation video!
Excuse my English

Answer 2

.qa-nav-user-item {float:right;margin-left:12px; font-weight:bold;width:100px;}

 Taking out the inline and setting a float and a width works for me.

Or

.qa-nav-user-facebook-login {width:100px;display:inline-block;}

use CTRL F5 to refresh the page !!!

Answer 3

Its back to normal