Question

I have a div that contains the Facebook Like button, Google plusone and an email button. I’ve floated the div with float:right, however the Google plusone is no longer clickable. The Facebook button is clickable across 2/3rds of the button.

When I remove the float:right from the class BookContain, it works ok (only its to the left). I’ve tried removing float:right and replaced it with a relative positioning, but again Google plusone doesn’t like it.

Here’s an example… http://www.giftsthatthrill.com.au/gifts/skydiving-experiences/Coolum_Beach/AD9788

The CSS for the block is

.bookcontain {
margin-top:5px;
float:right;
}
.bookcontain ul {
text-align:left;
list-style:none;
margin:0;
padding:0;
}
.bookcontain ul li{
text-align:left;
display:inline-block;
padding:0 2px 2px 0;
margin:0 0 0 5px;

}
 .bookcontain ul li.google {
vertical-align:top; 

}

I’m also finding that Firefox shows the Google plusone lower in the block … this may be relevant to the issue above.

Any thoughts would be most appreciated !

Answer 1

The buttons aren’t clickable because they are hidden by the tabs div.

Here is a quick workaround…

Add this CSS to place the buttons above the tabs div:

#socialBookMarks{
    position: relative;
    z-index: 9;
}

This will move the Google+ button up:

.google{
    position: relative;
    top: -13px;
}

I’ll update soon with CSS to fix the positon of the buttons…