Question

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:

and with Firefox:

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

Thanks for any help!

Answer 1

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>