Share plugin - Facebook button display problem

Question

The facebook like button is not alligned with the others. I tried to move his position to see if problem is with 1st element in the row but the problem was still with the facebook button no matter it's positioning.

URL that shows the problem:

http://www.softworld.com/qa/10/how-can-i-make-opera-to-display-the-browsing-speed

Comments

Also I think a good option for easy customization and tracking of sharing would be integration with AddThis

Answer 1

This is a css problem; I've updated the default css, try putting to code below into the admin/plugins share css box:

#qa-share-buttons-container {
    background: none repeat scroll 0 0 #DDDDDD;
    font-size: 125%;
    font-weight: bold;
    margin: 20px 0;
    padding: 20px;
    text-align: center;

}
#qa-share-buttons {
    vertical-align:middle;
}
.share-widget-container {
    display:inline-block;
    poisiton:relative;
}
.qa-share-button {
    width: 54px;

}

Comments

I changed the code but the problem persists.

---

looking on your page, I still see this:

#qa-share-buttons > span, #qa-share-buttons img, #qa-share-buttons > div, #qa-share-buttons > iframe {
  vertical-align: middle !important;
}

That's the problem, where ever it is coming from.

---

I used the exact text you mentioned above. The only change to the old code I noticed was : #qa-share-buttons {vertical-align:middle;}

I see in your comment you mention iframe for this box. Where should I add that?

---

No, as far as I can see, you haven't used the code above; the code on your page is as follows:

#qa-share-buttons-container {
    background: none repeat scroll 0 0 #DDDDDD;
    font-size: 125%;
    font-weight: bold;
    margin: 20px 0;
    padding: 20px;
    text-align: center;
}
#qa-share-buttons {
    margin-left: 6px;
}
#qa-share-buttons > span, #qa-share-buttons img, #qa-share-buttons > div, #qa-share-buttons > iframe {
    vertical-align: middle !important;
}
.share-widget-container {
    display: inline-block;
}
.qa-share-button {
    vertical-align: middle !important;
    width: 54px;
}

which is not the same as the code I gave you above.

---

I do have the code from the initial answer and also tried the one above and none works for the vertical alignement(tried all browsers apart iexplorer). if the code to use is not the one from initial answer or above code let me know. if this is fixed in the plugin I can re-download and use that file

---

no, I'm sorry, whatever you say, you don't have the code from the initial answer on that page.  That is your problem.

---

the page to edit is qa-share-admin.php right?

---

no, please read the original answer, as it tells you where to put the code.

---

ohh, I completely misunderstood that. Changed where you said and is fixed now. Thanks a lot