Announcement

Collapse
No announcement yet.

Facebook Like button destroys style

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [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

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

    - *Admin Settable Paid Subscription Reminder Timeframe*
    -
    *PM - Add ability to reply to originator only*
    - Add Admin ability to auto-subscribe users to specific channel(s)
    - "Quick Route" Interface...

    Comment


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

      Comment


      • #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


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

          Comment


          • #6
            Originally posted by niak_judge View Post
            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


            • #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


              • #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


                • #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


                  • #10
                    Originally posted by railing View Post
                    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


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

                      Comment


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

                        Comment

                        Related Topics

                        Collapse

                        Working...
                        X