Static FBML CSS: Internet Explorer (all versions) and other browser

Posted: January 24, 2010 in Uncategorized

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=”” 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=”” rel=”stylesheet” type=”text/css” />
  • 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; }

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.

Read more:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s