As many of you have probably noticed, viewing Static FBML tabs with Internet Explorer 8 is now a rather painful experience IF you inlined the styles with the <style> … </style> tag instead of having an external stylesheet called with the <link rel=”stylesheet” text=”text/css” href=”URL TO STYLESHEET” /> tag.
If you call an external style sheet via the <link> tag, then IE 8 is happy and will display your tab as dictated by the styles in the stylesheet. This is a problem on Facebook’s side, as nothing changed in the past few days with IE 8 and Facebook is constantly fiddling with their API.
This current problem underscores the importance of using external stylesheets for your Static FBML tabs instead of inlining the styles.
There is a bug report on the Facebook Bug Tracker #11683, but no one from Facebook has commented there.
The solution, as discussed in my earlier post on using external stylesheets with Static FBML, is to NOT inline your styles, but use the <link rel=”stylesheet” type=”text/css” href=”URL TO STYLESHEET”>. Of course, you have to put your CSS styles in a text document with the extension “.css” (and DON’T include the <style> </style> tags!). Besides the current situation, where IE 8 simply isn’t rendering styles inlined with the <style> … </style> tag, background images called from inlined styles are often displayed incorrectly.
You’ve changed from inlined to external styles and your tab’s display is still broken in IE 8?
If you changed from inlined to external stylesheets and your Static FBML still appears broken, try incrementing the number we’ve recommended in the past to refresh Facebook’s cache. Use:
<link rel=”stylesheet” type=”text/css” href=”http://www.your-domain.com/your-stylesheet.css?v=40.0″ />
The “?v=40.0” appended to the end of your stylesheet file name forces Facebook to refresh its cache. In the above example, I have intentionally set it high (usually you just start with 10.0) just to make sure. Every time you modify your external CSS you need to increment that number to refresh Facebook’s cached version of your stylesheet.
If you’re switching from using the <style> … </style> tag to inline your styles, to calling your external stylesheet via the <link> tag, then I would strongly recommend using the “?v=”40.0” method to emphasize the change on Facebook.