wordpress plugin - Facebook "like" is not aligned and not showing on Firefox
We're seeing an issue where the "add this" Facebook button does not line up horizontally with the other icons (sample at https://www.socialmarketingnoise.com/a-quick-test-post/)
Any idea why it would be about 3-5 pixels "lower" than the twitter/Google/RSS buttons?
TIA, Steve
Actually, I found the reason it wasn't showing on Firefox (entirely my fault, I had facebook.net blocked temporarily while I was trying some other testing). But the alignment problem is still an issue.
Steve
Steve
One more quick update. We removed the test post, and have a real article there now, which means my original link won't work. One that will work is
https://www.socialmarketingnoise.com/noise-and-more-noise/
Steve
https://www.socialmarketingnoise.com/noise-and-more-noise/
Steve
Looks like the problem is that the <fb:like> button is inhereting the font-size: 133%; from the #content rule on the style.css file, line 984. Add an exception for that rule for the Facebook Like button and it will show up properly
Paul,
I'm not sure how to do what you said. I understand "what" you said, I just don't know how to implement it physically.
I see all kinds of classes that appear to be defining that button, from "connect_widget_interactive_area" to "connect_button_container" to "like_button_no_like", but I'm not sure what to do here.
Can you give me a little more "detail" on which class I should be defining to override the FB Like button, and I'll try to add a "font-size: 100%" to an exception rule.
I'm fairly new to CSS, so this isn't crystal clear to me (yet)...
Thanks!
Steve
I'm not sure how to do what you said. I understand "what" you said, I just don't know how to implement it physically.
I see all kinds of classes that appear to be defining that button, from "connect_widget_interactive_area" to "connect_button_container" to "like_button_no_like", but I'm not sure what to do here.
Can you give me a little more "detail" on which class I should be defining to override the FB Like button, and I'll try to add a "font-size: 100%" to an exception rule.
I'm fairly new to CSS, so this isn't crystal clear to me (yet)...
Thanks!
Steve
I am having the same exact issue but I don't have a font size rule.
http://www.antiochchurch.org/media/sermons/
http://www.antiochchurch.org/media/sermons/
Steve:
Add this to your style.css file:
addthis_toolbox {
font-size: 100%;
}
To debug CSS problems start removing CSS definitions until you stop seeing the behavior. Then figure out how to get the same effect without causing the display bug.
Add this to your style.css file:
addthis_toolbox {
font-size: 100%;
}
To debug CSS problems start removing CSS definitions until you stop seeing the behavior. Then figure out how to get the same effect without causing the display bug.
Paul,
I tried your addthis_toolbox change to change font-size to 100%. Didn't help. I've also tried adjusting the height of fb_edge_widget_with_comment and fb_iframe_widget, but there's always about 5-10px of padding at the top of the FB button. I tried changing vertical-alignment for those classes from "baseline" to "top" as well.
What's really weird is that if you watch closely during page load, the button is initially aligned, with the other icons, then the browser drops it by a few pix. I'm going to keep playing with CSS, but I don't think that it's a font-size thing.
Although I can read and make minor adjustments to CSS, I'm not by any stretch of the imagination a CSS developer. I've simply started with Wordpress, added a few plugins (~10) and am more worried about content.
I've spent a lot of time trying to debug this plugin, so I think my next step is to switch to the simple square "no counter" buttons, and circle back to see if a new version of addthis in the future fixes this problem.
I will keep an eye on this thread in case the problem gets solved for "gbucha", but I need to keep going forward with other issues and content.
Steve
I tried your addthis_toolbox change to change font-size to 100%. Didn't help. I've also tried adjusting the height of fb_edge_widget_with_comment and fb_iframe_widget, but there's always about 5-10px of padding at the top of the FB button. I tried changing vertical-alignment for those classes from "baseline" to "top" as well.
What's really weird is that if you watch closely during page load, the button is initially aligned, with the other icons, then the browser drops it by a few pix. I'm going to keep playing with CSS, but I don't think that it's a font-size thing.
Although I can read and make minor adjustments to CSS, I'm not by any stretch of the imagination a CSS developer. I've simply started with Wordpress, added a few plugins (~10) and am more worried about content.
I've spent a lot of time trying to debug this plugin, so I think my next step is to switch to the simple square "no counter" buttons, and circle back to see if a new version of addthis in the future fixes this problem.
I will keep an eye on this thread in case the problem gets solved for "gbucha", but I need to keep going forward with other issues and content.
Steve
This question is closed to new answers.