Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1071
  • Last Modified:

Aligning Google plus one and Facebook networking buttons

I want to align Facebook and Google plus one buttons horizontally.

The code I've written is as below. The buttons align in Chrome and Firebox but in IE they are split into two lines.

How do I align them using CSS and without using tables so that the code works in IE as well?

<div id="shares">
<span><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.example.com" show_faces="false" width="300" font="lucida grande"></fb:like></span>
<span><g:plusone size="medium" annotation="inline" width="300" href="http://www.example.com"></g:plusone></span>
<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>

Open in new window

0
noobie210
Asked:
noobie210
  • 2
1 Solution
 
Dean OBrienCommented:
try:

<style>
span {height:30px;vertical-align:middle}
</style>
0
 
noobie210Author Commented:
It works. For anyone else who is interested the new code is as below: Hope this is right, easynow111?
<div id="shares">
<span class="facebook" style="height:30px;vertical-align:middle;"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.example.com" show_faces="false" width="400" font="lucida grande"></fb:like></span>
<span class="google" style="height:30px;vertical-align:middle;"><g:plusone size="medium" annotation="inline" width="300" href="http://www.example.com"></g:plusone></span>
<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>

Open in new window

0
 
Dean OBrienCommented:
Glad it works, it was a stab in the dark really, wasnt sure how google/fb would output.

Cheers for points.

Easynow
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now