css - FBML, visible-to-connection, else, extra white space -


on facebook, using fbml box add-on, can create tab contains custom code. 1 of things can hide content people don't "like" , reveal content once click "like" button. done via code:

<fb:visible-to-connection>   <div class="fan">content fans</div> <fb:else>   <div class="no-fan">content non-fans</div> </fb:else> </fb:visible-to-connection> 

the problem facebook applies visibility:hidden hidden content, means content gone, white space remains. can set margin-top of .no-fan negative value, move content, therefore hiding white space. works quite well. works flawlessly if height of content of .fan equal .no-fan. in case aren't. .fan content longer , therefore once "like" us, bottom image gets cut off (on .fan). seems equivalent of overflow:hidden, taking height of .no-fan content. when force height of .fan content, revealed, when not fan, there white space above .no-fan content. i've tried various combinations of applying padding, forcing heights, there's inconsistency.

has had problem? have done solve it? if you've never worked fbml, logical approach?

thanks, ryan

you need add code on top:

<style> #wrapper { width:520px; margin:0 auto; border:0; padding:0; position:relative; } #non-fans { width:520px; position:absolute; top:0; left:0; } </style> 

Comments

Popular posts from this blog

asp.net - repeatedly call AddImageUrl(url) to assemble pdf document -

java - Android recognize cell phone with keyboard or not? -

iphone - How would you achieve a LED Scrolling effect? -