Posts Tagged Internet Explorer
Static FBML & Internet Explorer 8 - Use External Stylesheets, Not Inlined
Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML, Web Coding on August 1st, 2010
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.
NEW: Read our tutorial on creating and hosting your external stylesheet, using Google Sites!
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.
Facebook Static FBML and Internet Explorer - CSS & Stylesheets
Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML, Web Coding on December 18th, 2009
UPDATE: Apr 2010: Facebook appears to have changed its API so that calls to external CSS files are no longer supported, in new fan pages. Fan pages created before the change still work, but for how long, who knows? Read my new post how to implement CSS in your Static FBML tab....
Original Post...
In my post on adding the Facebook application Static FBML to your Fan Page, I laid out in detail how to use this very useful app to create very nice page layouts for your Wall tabs. As I've researched this further, I found that good ol' Microsoft Internet Explorer versions 6, 7 and 8 do not handle these Static FBML pages like Firefox, Safari and the other browsers. Of course, any seasoned Web developer expects this and IE does not disappoint.
Static FBML CSS: Internet Explorer (all versions) and other browsers
With Internet Explorer you have only two options in applying CSS styles to your Static FBML application tab:
- Calling an external stylesheet using, for example:
<link href="http://yoursite.com/styles/layout.css" rel="stylesheet" type="text/css" />
Of course, you need to upload the CSS file to your server (or some Web-accessible server). NOTE: Add this string to the end of your external stylesheet call to force Facebook to refresh the version it has cached (example): <link href="http://yoursite.com/styles/layout.css?v=10.0" rel="stylesheet" type="text/css" /> (change the v= number each time you refresh the page.) - Putting the CSS styles inside the HTML mark-up, i.e. inlining the styles, for example:
<div style="font-size:14px; margin:0 auto;">
Although inlining the styles has appeared to always work with Static FBML application-tab pages, using calls to an external stylesheet seems to be only recently supported. I tested our HyperArts Static FBML Page, calling an external stylesheet, and it's working fine. (If anyone does notice an issue, please let me know!)
The option that <em>doesn't</em> work with Internet Explorer is using the style tag to embed your CSS rules:
<style type="text/css">
.some-class { margin:0; font-size:14px; }
#some-id { margin:0; font-size:14px; }
</style>
Although the above works in most other browsers, Internet Explorer ignores the contents of that tag.
If at all possible, you should choose the option to call an external stylesheet. You have much greater flexibility in applying — and making changes to — your CSS using a stand-alone stylesheet.
Static FBML Code Templates for Sale!
