Facebook, like a popup dialog, is cropped to the width of the button

Question

Check out my blog here:

http://www.brixwork.com/realtors/blog/seo/best-time-to-post-on-facebook-or-twitter-and-email/

When you try to press the "LIKE" button, a pop-up window appears at the correct height, but the width is limited by the width of the button.

Here is my CSS code:

.blog_social_media { float: right; border-left: 1px dotted #666; margin-bottom: 10px; margin-left: 10px; padding-top: 10px; overflow: visible; } .blog_social_media div { position:relative; display:block; float:left; } iframe.fb_ltr { width: 300px !important; } .blog_twitter_button { width: 55px; height: 62px; margin: 0px 0px 10px 10px; } .blog_facebook_button { width: 50px; height: 63px; overflow: visible !important; margin: 0px 0px 10px 10px; } .blog_googleplus_button { width: 50px; height: 64px; margin: 0px 0px 10px 10px; } 

Here is the HTML code:

 <div class="blog_social_media" style="width:65px; height:auto;"> <div class="blog_twitter_button"> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="brixwork" data-related="sonikastudios">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div> <div class="blog_facebook_button"> <div class="fb-like" data-href="http://www.brixwork.com/realtors/blog/seo/three-reasons-to-claim-your-place-on-google-places/" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-font="lucida grande"> </div> </div> <div class="blog_googleplus_button"> <!-- Place this tag where you want the +1 button to render --> <g:plusone size="tall"></g:plusone> <!-- Place this render call where appropriate --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> </div> 

I have an overflow: visible; mounted on all of my elements that surround the facebook balloon. The same CSS logic works fine in the Google+ popup dialog, and only one of them suffocates. What happens, what can I fix?

Thanks in advance.

Answer 1

 .fb_edge_widget_with_comment span {overflow:visible !important; width:450px !important; margin-right:-375px;} 

Put this in your css, it will set the size of the popup to its undeclared size and reduce the excess by a negative limit.

Answer 2

There seems to be a problem with:

 <div class="blog_facebook_button"> <div class="fb-like" data-href="http://www.brixwork.com/realtors/blog/seo/three-reasons-to-claim-your-place-on-google-places/" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-font="lucida grande"> </div> </div> 

The value of attr-width = "50" should be the data width = "250", and then you need to add

 .blog_facebook_button { position: relative; } .fb-like { position: absolute; top: 0; left: 0; } 

Answer 3

It worked for me.

 .fb-like span { overflow:visible !important; width:450px !important; margin-right:-400px; } 

Answer 4

looks like div.fb-like -> span disables CSS validation:

 div.fb-like span { width: 450px; overflow: visible; }