This is my first time working on a facebook app. I created an iframe app (i.e selected iframe as the canvas type when registering the app). I have this situation where there is a multi friend selector form in the sidebar of the app (which has a width of about 200px).
Screenshot: 
The relevant code for generating that form is as follows (except the html tag which is part of the app layout):
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml">
// some layout markup here for the whole app....
<div id="sidebar"> // place a condensed friend selector here
<fb:serverFbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action="invite_url" content="
Hey! a form!" invite="true" method="post" type="sample">
<fb:multi-friend-selector actiontext="Invite your friends to check out this site" condensed="true" exclude_ids="" max="20" showborder="true" style="width: 300px;" />
<fb:request-form-submit label="Send" />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverFbml>
</div>
When i click on "Send invitations", i get a confirm dialog box but it appears within the iframe in which the multi-friend selector is placed (thus breaking the layout) and not on the parent iframe where the main app loads.
Screenshot: 
I tried the following code (where i remove the fb:serverFbml tag):
<fb:fbml>
<fb:share-button></fb:share-button>
<fb:request-form type="my_app" method="post" invite="true" content="Form content" action="/action">
<fb:multi-friend-selector actiontext="Invite your friends to check out this site" condensed="true" exclude_ids="" max="20" showborder="true" style="width: 300px;"></fb:multi-friend-selector>
<fb:request-form-submit label="Send" />
</fb:request-form>
</fb:fbml>
Here the share button is displayed but the selector form is empty (nothing is rendered inside the fb:multi-friend-selector tag)
I am using the FB initialization code as described here: link text
How can i fix this issue? Is there something missing in my fb api code?