?
Solved

Alignment of Facebook button at frugalmule.com

Posted on 2011-10-26
6
Medium Priority
?
326 Views
Last Modified: 2012-05-12
We have added twitter and facebook buttons to our website http://frugalmule.com but my developer is having trouble with the vertical alignment. The buttons (facebook and twitter) refuse to line up for some reason.

Here is the code for the "javascript-enabled widget" that holds both buttons:

<a style="display:inline;height:20px;vertical-align:bottom" href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
<div style="display:inline;margin:0;padding:0 10px 0 5px; border:none;" class="fb-like" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div>
0
Comment
Question by:rtod2
  • 3
  • 2
6 Comments
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 37033129
I think this should work:
div.hjawidget{vertical-align: top;}
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 37033132
Most of the problem is coming from:

.button_count a.connect_widget_like_button {
    padding: 2px 4px;
}

which is coming from Facebook itself.  I have to wonder why you're doing it this way, though.  It would be easier to install any number of social sharing plugins whose developers have already solved this problem.
0
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 37033150
oh, actually what a changed was vertical align on this element. I am not sure why you have it explicitly set baseline, but if it doesn't affect the rest of your page, this does appear to fix the problem when I change it in firebug.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:rtod2
ID: 37034539
My developer seems to have given up on this one today.  I'm becoming more familiar with the back-end but clearly not there yet.  Where would I put this in?
0
 
LVL 17

Accepted Solution

by:
jrm213jrm213 earned 2000 total points
ID: 37034909
That is the first css style in your stylesheet

I just changed vertical-align from baseline to top.

Just went to your site looks like you found it.
0
 

Author Closing Comment

by:rtod2
ID: 37034924
Yes I did.  Great answer!  Thank You.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
Suggested Courses

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question