title: FBML, visible-to-connection, else, extra white space
body: <p>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:</p>
  
  <pre><code>&lt;fb:visible-to-connection&gt;
    &lt;div class="fan"&gt;Content for fans&lt;/div&gt;
  &lt;fb:else&gt;
    &lt;div class="no-fan"&gt;Content for non-fans&lt;/div&gt;
  &lt;/fb:else&gt;
  &lt;/fb:visible-to-connection&gt;
  </code></pre>
  
  <p>The problem 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 <em>if</em> 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.</p>
  
  <p>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?</p>
  
  <p>Thanks,
  Ryan</p>