fan page troubleshooting

I apologize in advance if this isn't the best place to post this thread (not a FB App question)...

The problem is...
I'm using the <fb:visible-to-connection> feature to incorporate a reveal tab ('Like' this page to reveal a different image in the same tab) but before the page is liked, the page displays an empty gap before the image. It appears to be the same amount of space as the length of the content that displays when the page is "Liked."

capiche??


Here's an image of what is happening (hopefully it's not too light):


Here's the stripped down fbml code:

<style>
#wrapper {width:520px; padding:0; height: 100%; }
#wrapper .clearfix { display: block; }
.bg { background:#f6f6f7; }
.content { margin: 0px; padding: 10px; font-family: 'Century Gothic','Bitstream Vera Sans',Verdana,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 13px; line-height: 140%; font-size-adjust: none; font-stretch: normal; color: #444444; }
</style>

<div id="wrapper">
<div class="bg"> <!-- main content -->
<fb:visible-to-connection> <!-- FANS ONLY -->
<div class="content">
<img src="http://mysite.net/images/image2.png" />
</div>
<fb:else>
<img src="http://mysite.net/images/image1.png" />
</fb:else>
</fb:visible-to-connection>
</div> <!-- END bg -->
</div> <!-- END wrapper -->

I'm sure it's something obvious but i've looked at it so long i can't see IT.
Any help would be greatly appreciated!!!!!!!
Thanks in advance

 

From Facebook documentation

"Content inside this tag is rendered to all users' browsers, including those who are not one of the specified users. For those who are not one of those users, the content is shown as white space on the page but it is still visible by viewing the page source." Google for Hyperarts tutorial /facebook-fan-pages-content-for-fans-only-static-fbml/

 

check this tutorial http://fbml-templates.net/2010/08/fbml-code-hide-content-from-non-fans-show-it-to-fans/ this should helps you in coding a facebook fan page.