CODEWITHSUNDEEP
cssgoogle-plus-one
Phil Williams
Phil Williams

Reputation: 23

Unable to float right the google plusone button and get it to work

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 !

Upvotes: 0

Views: 1067

Answers (2)

user1160232
user1160232

Reputation: 98

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...

Upvotes: 0

Libin
Libin

Reputation: 2462

Do the following changes in your file.

Place <div style="clear:both;"></div> after socialBookMarks closing division.

Remove vertical-align: top; from CSS5.css line number 22

These changes will make your buttons stay at right side, clickable and aligned properly.

Upvotes: 0

Related Questions