Facebook JS affecting CSS/@font-face in IE?

Question

I seem to notice that Facebook's JS

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script>

seems to affect my site's CSS in IE. eg. say headers use font1 and body use font2. sometimes, in IE all fonts use font1 or even swap, headers used font2 and body use font1 ... It also seem to affect some PIE CSS stuff. Anyone having the same problem?

Answer 1

I had the exact same problem. I use a downloaded font for my headers and on IE8, the Facebook Javascript screwed up the fonts. This occurred when I structured my code in what I assumed was the proper architecture - the Facebook Javascript include was up in my header with the rest of my Javascript includes.

When I moved the javascript include down to the actual div that added the like button, the problem went away.

    <div id="facebooklike" style="position: absolute; left: 645px; top: -37px;">
    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.tripinsurance.com" send="false" width="350" show_faces="false" font="arial"></fb:like>
    </div>

I think the issue may be happening if the Facebook code is loaded before the the div loads on the page.