Help to show Google login button

I have css and html codes below. It only display Facebook login button but hide Google login button although when view source I can see it there. Any idea to fix it? http://thejobs.com.my/


.social_Ct {position: relative;margin: 10px auto;}
.social_Ct li {background: url(http://thejobs.com.my/mod/CSS/sprites/sprites_HZ_1-7-2014.png) no-repeat;position: absolute;display: block;list-style: none;}
.social_Ct a {height:32px;display: block;}
.social_Login{padding:0 0 0 0;height:75px}.blue{color:#2b83b6}.social_Ct .google_Login{ background-position: -1390px 0px; width: 162px; height: 29px;  }.social_Ct .FB_Login{ background-position: -1218px 0px; width: 162px; height: 29px;  }

	<div class="social_Login">
	Sign in using social network:<br>
<ul class="social_Ct">
  <li class="google_Login"><a href="/social/?network=google" class="" alt="Login with google" title=""></a></li>

  <li class="FB_Login"><a href="/social/?network=facebook" class="" alt="Login with Facebook" title=""></a></li>
</ul>
	</div>

HI,

Try adding this cSS.


.social_Ct li{position:relative;margin:0 0 5px}

You have the elements set to absolute and so they are actually sitting on top of each other.:slight_smile:

Thank for reply. I have changed it but it shown in row. May I know how to set it inline (Left and Right)?

http://jsfiddle.net/ySYps/1/

Hi,

If you want them on one line at left and right then try this:


.Login_Ct{padding:0}
.Login_Ct li {float:left}
.Login_Ct li + li {float:right}

Remember with uls you need to clear the default horizontal margins and padding or you will get extra space to the left.