Question

I implemented the Facebook registration on my website. Everything works fine except that suddenly the button is being rendering distorted. I’m testing the website locally.

this is the html code:

echo '<ul id="login_menu">
<li id="login_button"><a>Login</a></li>
<li class="register_button"><a href="register.php">Register</a></li>
<li>  <fb:login-button registration-url="registerwithfb.php" /> 
</li>
</ul>';

javascript:

<div id="fb-root"></div>

    <script type="text/javascript">
       window.fbAsyncInit = function() {
        FB.init({
                appId   : '<?php echo $facebook->getAppId(); ?>',
                session : <?php echo json_encode($session); ?>, // don't refetch the      session when PHP already has it
                status  : true, // check login status
                cookie  : true, // enable cookies to allow the server to access the   session
                xfbml   : true // parse XFBML
        });

        // whenever the user logs in, we refresh the page
        FB.Event.subscribe('auth.login', function() {
                window.location.reload();
        });
};

(function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
}());

and css:

#login_menu{
float:right;
}
 #login_menu li{
 margin:0;
 padding:0;
 float:left;
  position:relative;
  }

   #login_menu li a{
   text-decoration:none;
    list-style:none;
   line-height:50px;
  text-decoration:none;
  height:55px;
   font-weight:900;
   font-size:13px;
  border-right: 1px solid #555;
  padding: 0 15px;
  color:#59b1da;
  }
 #login_menu li a:hover{
  color:#ffffff;

   }

any idea?

thanks

Answer 1

comment out #login_menu li a

as it may have been interfering. Glad I could help.