Floating Social Facebook Like Balloon Collapses

Hello All,

Any tips on why the Facebook Likes balloon collapses on Floating Social?

No one stuck it with a pin.:slight_smile:

You may be able to see the effect here:

http://soobahkdo.biz/

Sometimes (more than not) it collapses left into a vertical line.

Then when its mood changes it may display expanded.

Thanks,

Phil D

  • SooBahkDo
    • Syntax Hero

    Hi Phil,

    Sorry about that.

    We had to deactive it troublshooting other issues.

    Floating Social is back on, but may only be temporary as it seemed to be fighting

    with the plugin Sociable and we may have to choose between the two. Shoot!

    However a screenshot is attached in case it is deactivated again when you get around to this.

    http://soobahkdo.biz/

    The collapsing balloon only seem to happen in IE 8 and is intermittent.

    I have also had some users complain that the alignment of the icons, ballons, etc, looks funcky and

    not quite right. Is that something we can adjiust? If so, how?

    Thanks,

    Phil D

  • Timothy
    • Chief Pigeon

    Hey Phil.

    I presume you have already had a play around with the plugins features?

    Admin –> Settings –> Floating Social

    /wp-admin/options-general.php?page=wdsb

    There are options there for different widths, offsets, custom css, etc.

    There is also an option titled “Attempt to fix front page conflicts”.

    I don’t see an issue myself but at the moment my Windows computers are packed away. I’m on a MAC.

    Let me know if any of them help?

    Take care.

  • SooBahkDo
    • Syntax Hero

    Hi Tim,

    I did try tweaking width, etc. and thought that fixed it for a while, then it cropped up again.

    Tried the fix conflict setting as well. Same results.

    I am not a css guru, but other times when I’ve bumped into these kind of problems, a css change recommended by a css guru often fixed it. Not sure where to make such a change or what to change in this case. Advice?

    As I mention, it seem to be IE8 specific, so you and your MAC are immune. :slight_smile:

    Thanks for chiming in.

    Phil D

  • SooBahkDo
    • Syntax Hero

    Hi Tim,

    I added the code and for now the Facebook balloon inflated, but the Google Plus button is sitting on top of it and there is more space at the top above the Google plus balloon.

    On the site you can see it in action with the extra code.

    Even without the extra code the Google Plus button and balloon seem to be aligned further left than the others. And they atill are with the extra code.

    Thanks,

    Phil D

  • SooBahkDo
    • Syntax Hero

    Hi Tim,

    This is what I have pasted in the admin area now:

    .connect_widget_number_cloud{

    width: 46px;

    }

    .wdsb-item {

    margin-bottom: 25px;

    }

    #___plusone_0 {

    padding-bottom: 25px !important;

    }

    Is that correct?

    You can see it on the site.

    Thanks a bunch for your time! :slight_smile: And your brain.

    You are my “Hero of the Day!” :slight_smile:

    Phil D

  • Timothy
    • Chief Pigeon

    Hey again.

    Sorry my browser crashed and then didn't open my tabs back up, well I blame the browser no the MAC :wink: lol

    So I start again. lol

    Looking at your code the conflict is with the following CSS file:

    http://soobahkdo.biz/wp-content/plugins/sociable/css/sociable.css

    And cause other side affects as well…..

    Anywhoo I suppose seems we targeted one specifically we might as well target the others. If it were me then I would go:

    .connect_widget_number_cloud{
    width: 46px;
    }

    Because that fixed your issue in IE.

    and then these:

    #wdsb-service-google {
    margin: -25px 0 25px;
    }

    #wdsb-service-facebook {
    margin-bottom: 25px;
    }

    #wdsb-service-twitter {
    margin-bottom: 25px;
    }

    That will put spacing between the social network bubbles. It will also remove the extra spacing at the top of the bubbles which the other plugin seems to be adding.

    The other plugin is still slightly throwing your Google one off. the !important rule doesn't work there, so you will need to make adjustments direct to the other plugins CSS for that. Sorry.

    I've attached screens including your original to show the difference in layout:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.