CODEWITHSUNDEEP
cssfacebookiframe
user347284
user347284

Reputation:

Facebook like button in <ul>

Facebook button is driving me nuts. I am trying to put all social buttons in one ul with "display: inline;" on the li elements. Here's the code:

        <ul id="social" class="grid_3 alpha">
            <li><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
            <li><div class="g-plusone" data-size="medium" data-count="false"></div></li>
            <li><iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&href&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></li>

        </ul>

Here are the results: with Safari: safari

and with Firefox: firefox

Now why aren't they showing on the same line in Safari?

Thanks for any help!

Upvotes: 1

Views: 965

Answers (2)

Shef
Shef

Reputation: 45589

Try adding float:left on li elements. In addition, you should define/reset margin and padding for your ul element, because that's what is accounting for the differences between the browsers.

Why does Firefox use other padding than Safari, Chrome and IE8?

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 78006

Set the width of the <ul> to accommodate all 3 <li> tags, and float:left the <li> tags.

The critical point here is to set the defined width in the <ul>

Upvotes: 3

Related Questions