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.