Search code examples
htmlcssgoogle-plus-one

Google plus share 'popup' css bug

I have tried to implement the google plus button into our site, but the popup bubble is really weird. enter image description here

I have used the following code:

<g:plusone annotation="none"></g:plusone>
<!-- Place this render call where appropriate -->
<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>

We uses some table on our page , and it seems it resets the google plus button's css. ( I know, it's weird to use table as a part of the design, so we use them correctly and not for the layout! )

Because we need that css code, how can I redefine the css of the google+ share bubble?

It's so important, I have seen some details like .pls-topTail, .pls-vertShimLeft, .pls-contentLeft , but any correct documentation for this I haven't seen yet.

Solution

  • Added a table:not(.gc-bubbleDefault) into the css everywhere where previously just a table was defined resolved the problem.