Search code examples
htmlcsssafariopera

Google plus icon breaks line in safari

I have share buttons at the bottom of my page, looking ok in Chrome and Firefox:

enter image description here

In safari not so much:

enter image description here

In opera breaks too :

enter image description here

This is my HTML :

<div class="social">
              <div class='custom-tweeter-follow'>
                <a class="twitter-follow-button" href="https://twitter.com/mycompany" data-show-count='false'>Follow @mycompany</a>
              </div>
              <div class="fb-like" data-href="https://www.facebook.com/mycompany" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
              <div class='custom-gplus-follow'>
                <g:plusone size="medium" count="false" href='https://plus.google.com/xxx'></g:plusone>
              </div>
              <div syle='clear:both'></div>
</div>

This is my css:

.copyright {
  float: left
  line-height: 25px
  font-weight: 300
  font-size: 14px
  width: 240px
}

.custom-tweeter-follow {
    float: left
    margin: 5px 10px 0px 0px
}
.custom-gplus-follow {
    float: right
    margin: 5px 0px 0px 0px
}

What am I doing wrong here? And how can I avoid things like this in the future, this should pretty much standard (sorry not a UI developer) what people are doing.

Solution

  • Ok so moving custom-gplus-follow to the beginning of social would solve the problem, since float: right elements need to come before others in the html to remain on the same row.