Databases
StackOverflow2013
Postsdbo
POGoogle + button not displaying poperly
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle + button not displaying poperly
    text
    copied!<p>I am trying to add social buttons to my site and I just cant bring the google+1 button closer to the the other social buttons. It just goes to the extreme left of the div.</p> <p>I have put up the code in Jsfiddle please take a look</p> <p>Here is how it is looking over at my end <img src="https://i.stack.imgur.com/FFGeb.jpg" alt="The social media icons"> See how the google+ button is to the extreme left</p> <p>JSFiddle here <a href="http://jsfiddle.net/LYYhj/3/" rel="nofollow noreferrer">http://jsfiddle.net/LYYhj/3/</a></p> <p>The code - HTML part</p> <pre><code>&lt;div id="fb-root"&gt;&lt;/div&gt; &lt;script&gt;(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 = "//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=291527307526682"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));&lt;/script&gt; &lt;article class="grid_6"&gt; &lt;div class="wrapper"&gt; &lt;ul class="ul-1"&gt; &lt;li&gt;&lt;!-- Place this tag where you want the +1 button to render. --&gt; &lt;div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120" data-href="http://www.xgen-hosting.com" style="float:right;"&gt;&lt;/div&gt; &lt;!-- Place this tag after the last +1 button tag. --&gt; &lt;script type="text/javascript"&gt; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); &lt;/script&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="https://twitter.com/XgenHosting" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false"&gt;Follow @XgenHosting&lt;/a&gt; &lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');&lt;/script&gt;&lt;/li&gt; &lt;li&gt;&lt;div class="fb-like" data-href="http://www.xgen-hosting.com/" data-width="120" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"&gt;&lt;/div&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/article&gt; </code></pre> <p>The CSS part</p> <pre><code>.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { display:inline; float:left; position:relative; margin:0 10px } .wrapper{overflow:hidden;position:relative;} .ul-1 { overflow:hidden; float:right; padding:48px 3px 0 0; } .ul-1 li { float:left; font-size:12px; line-height:15px; font-family: 'Droid Sans', sans-serif; text-transform:uppercase; text-shadow: 0 1px rgba(0,0,0, 0.6); background:url(../images/ul-1.png) left 3px no-repeat; margin-left:8px; padding-left:8px; color:#ddd; } .ul-1 li:first-child { background:none; padding:0; margin:0; } .ul-1 li a { color:#ddd; } .ul-1 li a:hover { color:#f04011; text-decoration:none; } </code></pre> <p>Also when I implement the code into my page the google+1 button moves up by a little and no matter what I do I just cant manage to bring it to align with the other social button.</p> <p>Link to the page <a href="http://www.xgen-hosting.com" rel="nofollow noreferrer">http://www.xgen-hosting.com</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload