2

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?

JM at Work
  • 2,417
  • 7
  • 33
  • 46
  • It's unlikely that this `script` tag is causing any issues with your CSS; it's more likely malformed code somewhere in your app. Can you post some screenshots/code/details so we can further diagnose it? – Jimmy Sawczuk Apr 21 '11 at 04:46
  • 2
    @Jimmy Sawczuk, I managed to fix it after using the async version of facebook as suggested by my boss, and moving the code to just before `

    `

     – JM at Work Apr 21 '11 at 08:19

1 Answers1

2

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.

user746177
  • 36
  • 1
  • I am also experiencing this issue. I have the facebook script in the div that contains the Like button as this answer suggests, but this does not solve the problem. This is something I've only noticed recently, which indicated a recent change in the rendered script may be responsible. Switching to the iFrame version (rather than the XFBML version) serves as a workaround... – MissingLinq May 19 '11 at 01:15
  • 1
    UPDATE: It appears I was using an older version of the recommended code. The
    thing is new -- must have been added within the past couple of weeks. So yes, indeed it appears to be solved if you use this version of the XFBML code.
     – MissingLinq May 19 '11 at 01:33
  • Using the latest XFBML code as suggested by MissingLinq worked for me. – xentek Jun 01 '11 at 20:44