Google +1 code help

[Boss Hog]

Hi guys, after a bit of help here, see this page > Printing of Business Cards, Letterheads, Flyers - Stationery Direct

How do I make the gap below the google +1 button the same as the gap above the Facebook like button? I tried adding 'padding-bottom:' to the google code but it didn't do anything, if that was the right way to do it? Out of my depth here, anyone?

<!-- Facebook -->
<iframesrc="http://www.facebook.com/plugins/like.php?app_id=207088675993575&amp;href=http%3A%2 F%2Fwww.stationery-direct.co.uk&amp;send=false&amp;layout=button_coun t&amp;width=169&amp;show_faces=false&amp;action=re commend&amp;colorscheme=light&amp;font=tahoma&amp; height=21"scrolling="no"frameborder="0"style="border:none; overflow:hidden; width:169px; height:30px;"></iframe>
<!-- Place this tag where you want the +1 button to render -->
<g:plusonesize="small"annotation="inline"width="169"href="http://www.stationery-direct.co.uk"></g:plusone>
<!-- Place this render call where appropriate -->
<scripttype="text/javascript">
window.___gcfg = {lang: 'en-GB'};
(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>

[Boss Hog]

Do I put it all in a div and specify something in the CSS?

[Corrosive]

Do I put it all in a div and specify something in the CSS?

That's what I'd do I think. Use a class and wrap both up in a div with the class applied and then specify a bottom margin in your CSS.

[Boss Hog]

Could you give me an example of how to do it?

[Corrosive]

HTML:

<div class="social">
<!-- Facebook -->
<iframesrc="http://www.facebook.com/plugins/like.php?app_id=207088675993575&amp;href=http%3A%2 F%2Fwww.stationery-direct.co.uk&amp;send=false&amp;layout=button_coun t&amp;width=169&amp;show_faces=false&amp;action=re commend&amp;colorscheme=light&amp;font=tahoma&amp; height=21"scrolling="no"frameborder="0"style="border:none; overflow:hidden; width:169px; height:30px;"></iframe>
</div>
<div class="social">
<!-- Place this tag where you want the +1 button to render -->
<g:plusonesize="small"annotation="inline"width="169"href="http://www.stationery-direct.co.uk"></g:plusone>
<!-- Place this render call where appropriate -->
<scripttype="text/javascript">
window.___gcfg = {lang: 'en-GB'};
(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>

CSS

.social {margin: 0 0 10px 0;}

Although there is a caveat round this that iframes are a tad unpredictable as you have no control over the content as such. Perhaps have a play with margins etc until it looks right.

[Boss Hog]

Worked a treat, thanks Toby


Cheers

Damon

[Corrosive]

You are welcome