Facebook Like button destroys style

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Speedy
    Member
    • Oct 2007
    • 34
    • 4.0.x

    [Forum] Facebook Like button destroys style

    I've added the Facebook Like button for threads, but it appears somewhere near the middle of the area above the posts inside a big gap. There are no template modifications. How can I fix this issue?
    Click image for larger version

Name:	fb_style.jpg
Views:	1
Size:	22.2 KB
ID:	3718075
  • Trevor Hannant
    vBulletin Support
    • Aug 2002
    • 24325
    • 5.7.X

    #2
    Can you give us a link to that page?
    Vote for:

    - Admin Settable Paid Subscription Reminder Timeframe (vB6)
    - Add Admin ability to auto-subscribe users to specific channel(s) (vB6)

    Comment

    • Speedy
      Member
      • Oct 2007
      • 34
      • 4.0.x

      #3
      The URL is www.techlifezone.com (the same on all thread pages)

      Comment

      • Speedy
        Member
        • Oct 2007
        • 34
        • 4.0.x

        #4
        I fixed the problem by changing the code in the facebook_likebutton template. I changed the entire template into this:
        HTML Code:
        <div align="right"><iframe id="fb_likeframe" style="height:25px" src="http://www.facebook.com/plugins/like.php?href={vb:raw href}&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=tahoma&amp;colorscheme=light&amp;height=27" scrolling="no" frameborder="0" allowTransparency="true"></iframe></div>
        Did the trick for me

        I used the DIV-tags to align it to the right, and added style="height:25px" to the iFrame to force a height of 25 pixels (which should be okay).

        Comment

        • niak_judge
          New Member
          • Feb 2010
          • 4
          • 4.0.0

          #5
          Thx for this Speedy! It's working quite good on my site !

          Comment

          • Speedy
            Member
            • Oct 2007
            • 34
            • 4.0.x

            #6
            Originally posted by niak_judge
            Thx for this Speedy! It's working quite good on my site !
            You're welcome
            Just wondering why Jelsoft hasn't tested this thoroughly before releasing it.

            Comment

            • unfv
              Senior Member
              • Apr 2008
              • 117
              • 5.7.0

              #7
              Same here, the problem exists also on the CMS section. I'll need to edit some code here.

              As I can see on your code, the propertie neede is style="height:25px" on the iframe tag.

              Comment

              • Speedy
                Member
                • Oct 2007
                • 34
                • 4.0.x

                #8
                It uses an iFrame pointing to a 3rd party website. In that case it's always best to set a fixed iFrame size, because changes to the 3rd party website can seriously mess up pages containing the iFrame.

                Comment

                • railing
                  New Member
                  • Jun 2010
                  • 2

                  #9
                  Mine did the same thing too. I narrowed it down to the vbulletin.css file. It didn't merge the correct information when I did the update to 4.04. This should be in the bottom of the CSS, and when I added it to the vbulletin.css file, everyting aligned correctly:

                  Code:
                   
                  /* Facebook Section */
                  label#fb_pulishlabel {
                   font-size: 12px;
                   font-weight: normal;
                   margin-right: 10px;
                   vertical-align: middle;
                  }
                  #fb_likeframe {
                   border: none;
                   overflow: hidden;
                   height: 27px;
                   vertical-align: text-bottom;
                  }
                  #pagetitle #fb_likeframe {
                   float: {vb:stylevar right};
                   width: 260px;
                  }
                  .blogbit #fb_likeframe {
                   margin-top: 7px;
                  }
                  /* Fix for Facebook Connect rtl scrollbar */
                  <vb:if condition="$stylevar['textdirection'] == 'rtl'">
                  #FB_HiddenContainer { left: 0; right: -10000px; <vb:if condition="is_browser('firefox')">display: none;</vb:if> }
                  </vb:if>

                  Comment

                  • obmob
                    Senior Member
                    • Sep 2001
                    • 278

                    #10
                    Originally posted by railing
                    Mine did the same thing too. I narrowed it down to the vbulletin.css file. It didn't merge the correct information when I did the update to 4.04. This should be in the bottom of the CSS, and when I added it to the vbulletin.css file, everyting aligned correctly:

                    Code:
                     
                    /* Facebook Section */
                    label#fb_pulishlabel {
                    font-size: 12px;
                    font-weight: normal;
                    margin-right: 10px;
                    vertical-align: middle;
                    }
                    #fb_likeframe {
                    border: none;
                    overflow: hidden;
                    height: 27px;
                    vertical-align: text-bottom;
                    }
                    #pagetitle #fb_likeframe {
                    float: {vb:stylevar right};
                    width: 260px;
                    }
                    .blogbit #fb_likeframe {
                    margin-top: 7px;
                    }
                    /* Fix for Facebook Connect rtl scrollbar */
                    <vb:if condition="$stylevar['textdirection'] == 'rtl'">
                    #FB_HiddenContainer { left: 0; right: -10000px; <vb:if condition="is_browser('firefox')">display: none;</vb:if> }
                    </vb:if>
                    this one works, thanks!
                    Currently working on:
                    Anizeen - What anime have you seen?
                    Osito Barrigón - Winnie Pooh y sus Amigos

                    Comment

                    • kholusoft
                      New Member
                      • Mar 2009
                      • 13

                      #11
                      having the same problem but now it is OK. Thank you guys
                      Personal Fitness

                      Comment

                      • ouranos43
                        New Member
                        • May 2010
                        • 4
                        • 4.0.x

                        #12
                        having the same problem but it is OK. Thank you guys

                        Comment

                        Related Topics

                        Collapse

                        Working...