Facebook send button content getting cut off

Question

I'm using the following code in my web page and i was wondering how i could fix this so that the send button content wouldn't get cut off.

Here's what the share content div code looks like

 <div id="share_buttons_wrapper">
    <h4 style="text-align:center;">Share</h4>
    <div id="share_buttons_single_page">
        <div class="wdt_button">
            <g:plusone size="tall" href="https://mailincard.mysite.com"></g:plusone>
        </div>
        <div class="wdt_button">
           <script src="https:////platform.twitter.com/widgets.js" type="text/javascript"></script>
            <div>
                <a href="https://twitter.com/share" class="twitter-share-button"
                    data-url="https://mailincard.mysite.com"
                    data-text="I just filled in my card online"
                    data-count="vertical">Tweet</a>
            </div>
        </div>
        <div class="wdt_button">
            <div class="fb-like" data-href="https://mailincard.mysite.com" data-send="true" data-layout="box_count" data-width="450" data-show-faces="true" data-font="tahoma"></div>
        </div>
    </div>


</div>

<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 id="fb-root"></div>
<script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "https://connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

here's the css

#share_buttons_wrapper 
{
 top:5px;
 left:850px;
 position: absolute;
 margin-left:5px;
 width: 86px;
 background-color: #eee;
 padding-top:2px;
 background-color : #EEE;
 border: 1px solid #CCC;

}
#share_buttons_single_page{
 background-color: #eee;
}

#share_buttons_single_page .wdt_button{
    clear:left;
    padding: 7px 0px 0px 16px;
    border-top: 1px solid #CCC;
    height:75px;
}

And here's a screenshot

Answer 1

I had a similar problem with Like button fly-out getting cut off. And then once I found a solution the fly-out got partially covered up under search input field. Here's the combined css to fix (I have the Likebox inside a span). Also, positioning the Like button was tricky, because I have a tweet button next to it, but top and left css did the trick.

.fb-like span {
/* http://wordpress.org/support/topic/facebook-like-button-flyout-getting-cut-off */
overflow: visible !important;
width:450px !important;
margin-right: -375px;
/* my additions */
z-index: 1000;
position: relative;
top: -4px;
left: -26px;
}

I hope this helps someone out, I spent 2-3 hours on it. Thanks for the tips in the comments.

Answer 2

You can try using overflow:visible