If you have recently experienced the issue of your inlined CSS not displaying in IE8 in Facebook on your Fan Page, you are not alone! A recent change to Facebook has caused any inlined CSS to fail to display in IE8. But good news, the fix is simple but it does involve the use of an external stylesheet! So, here goes:
1. You will need to go into your FBML application and cut your inlined CSS (the code from <style> to </style>) then you will need to create a new text document with the extension .css and paste the code between the style tags there. DO NOT INCLUDE THE STYLE TAGS IN THE CSS DOCUMENT.
2.Upload your style sheet to your server or if you do not have a place to host your external style sheet, use Google Sites and follow the instructions below:
If you don’t have a Webmaster who can upload your CSS stylesheet to a Web server and provide you with the URL to the file, then you’ll need to find a service that will host your external CSS file.
After researching this, it became apparent that Google Sites was the perfect option for external file hosting. The service is free — you just need to set up a Google account or add “Sites” to your existing account.
Setting Up Google Sites and Adding your Files
Log in to your Google account.
Click “Settings” in the top-right corner of your browser. You will see the Google services you have in your account. After the list of active services you’ll see:
If you don’t see “Sites” under “Try something new,” click the “More” link and, on the next screen you should see in the list.
Click on “Sites” and you’ll then be redirected to the landing page for your new Google Sites account:
Click “Create new site” and, on the next screen, fill in the “Name your site” field with a short descriptive name (NO SPACES). Below that you’ll see the URL for your new site. Write this down as this will be the URL you use for your stylesheet and any images, or any other file types, you upload.
Fill in the CAPTCHA characters and click “Create site”:
With “Home” highlighted in the left column, click “Create page” in the top right:
You’re going to want to create a directory for your files, so select the “File Cabinet” icon and enter a name for the directory (“facebook” is a good choice) and, again, NO spaces in that name (Google won’t let you create spaces anyway):
Then click the “Create Page” button (I recommend selecting “Put page at the top level”).
Next, click the “Add file” button.
Use the “Browse” button to locate on your computer the CSS stylesheet file you created, double-click the CSS file to upload it, and, if you want, add a “File description” which is shown in your list of files for easy identification. DON’T enter anything in “Text to display”:
Then click “Upload”.
You will then see your CSS file listed:
Copy your external CSS stylesheet URL to your Static FBML box
The URL to your stylesheet is what is in your browser’s address bar (at the top)
In the example, the URL is: http://sites.google.com/site/sacriliciousmarketing/facebook
Your URL will (unless Google changes something in the future) the same up the “/site/” but then will be your site’s name and the directory you created.
3. Add <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 need help with this fix for IE8, Facebook Custom Business Pages can make this change for you for a $50 service fee, just email us here.
Popularity: 19% [?]
