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

On Facebook, using the FBML box add-on, you can create a tab that contains custom code. One of the things you can do is hide content from people who don't "like" you and reveal content immediately once they click the "like" button. This is done via this code:

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

The proble开发者_开发技巧m is that Facebook applies a visibility:hidden to hidden content, which means the content is gone, but the white space remains. You can set margin-top of .no-fan to a negative value, which will move up the content, therefore hiding the white space. This generally works quite well. It actually works flawlessly if the height of the content of .fan is equal to .no-fan. In my case they aren't. My .fan content is longer and therefore once they "like" us, the bottom image gets cut off (on .fan). It seems to do the equivalent of overflow:hidden, taking the height of the .no-fan content. When I force the height of the .fan content, everything is revealed, but then when you are not a fan, there is white space above the .no-fan content. I've tried various combinations of applying padding, forcing heights, but there's always an inconsistency.

Has anyone had this problem? What have you done to solve it? Even if you've never worked with FBML, what would be another logical approach?

Thanks, Ryan

You need to add this 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>

I had this same white space issue in the facebook like box but it was solved by defining height. did u tried that?

OK, after another hour of playing with this, I figured out what the problem is.

Let's say my fan content is 100px tall and my non-fan content is 75px tall. When Facebook loads the non-fan content, it places a span around all of it, with overflow: hidden being one of the inline style attributes. When you "like" the page, it switches over to the fan content, but the height of the div containing overflow: hidden isn't updated, which means 25px of my fan content gets cut off.

The solution was to force the non-fan content to be 100px in height, so during the switch to becoming a fan, all the fan content would have room to be displayed. The down side is that there's some extra space below the non-fan content, but it's beyond the content I care for visitors to see. At least there's no white space above my content and all of my content is visible 100% of the time.

That's the solution I found, if anyone has recommendations or something I can try, I'd appreciate feedback.

-Ryan