I'm working on a site that is using Facebook Connect and recently made some changes so that the main pages are cached and if you are not logged in (checked with an ajax call) it loads the Facebook Connect javascript and renders the connect button into the page. This works perfectly everywhere except Internet Explorer 7 and 8. The weird part is I render the buttons into a hidden Sign Up / Sign In form and when you show either of those the Connect buttons appear. You can take a look here and you will see the button in Firefox and not Internet Explorer. If you click Sign In the button will show up.

This is a Rails app so on the server-side we're responding to an ajax call with rjs like this:

  page['signin-status'].replace(:partial => "common/layout/signin_menu")

  page.select('.facebook-connect').each do |value, index|
    value.replace(render(:partial => '/facebook/signin'))
  end

  page << <<-eos
  LazyLoader.load('http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php', function(){
    FB.init('#{Facebooker.api_key}','/xd_receiver.html');
  });
eos

The first line is replacing the header, the second is the Connect buttons in the Modal dialogs. The partial being rendered into the header looks like this:

<span id='signin-status'>
  <%= fb_login_button(remote_function(:url => "/facebook/connect"))%> |
  <%= link_to_function "Sign In", "showSignInForm();", :id => "signin" %> |
  <%= link_to_function "Sign Up", "showSignUpForm();", :id => "signup" %>
</span>

The Partial being rendered into the Modal dialogs looks like this:

  <div class='facebook-connect'>
    <div id="FB_HiddenContainer"  style="position:absolute; top:-10000px; width:0px; height:0px;" ></div>
    <label>Or sign in with your Facebook account</label>
    <%= fb_login_button(remote_function(:url => "/facebook/connect"))%>
  </div> 

I find it very strange that showing the Modal dialog causes all the icons to show. Does anyone have any ideas or suggestions about what's going on?