Contact Us
  • Static FBML: Use External Stylesheet or CSS Styles Won't Work in Internet Explorer

    PLEASE NOTE: Having answered the same questions about embedding YouTube videos and Flash in Static FBML custom tabs and using FBML many many times, I’m closing comments on this article and have posted a comprehensive Static FBML Troubleshooting Guide which addresses all the issues that cause users problems when implementing FBML on their custom tabs. Please refer to this article for help, as I’ve closed comments on this post.

    The troubleshooting article, combined with this tutorial and the many user comments, should address your issues and get you sorted out. Cheers!

    IE-logoIf you want your CSS styles on your Facebook Custom Tab to work with Internet Explorer / IE 6, IE 7 or IE 8, you MUST use an EXTERNAL stylesheet.

    This article explains how to work around this Internet Explorer limitation when creating your Facebook Custom Static FBML Tabs.

    The Internet Explorer browser does NOT read CSS styles inlined using this method:

    <style>
    YOUR CSS STYLE RULES
    </style>

    To play nice with Internet Explorer, you MUST use an external stylesheet and call it using this method:

    <link ref="stylesheet" type="text/css" href="URL-TO-STYLESHEET" />

    External Stylesheets, Internet Explorer & Static FBML

    When editing your FBML box…
    Implement your CSS styles like this:
    FBML External CSS with Link Tag

    NOT like this:
    FBML External CSS with Inlined Styles

    You CAN inline styles directly into the HTML code, and this is supported across all browsers. Example:

    <div style="color:#000; border: 1px solid #f00; text-align:center;"> DIV CONTENT </div>

    But this can become very cumbersome because you can’t use classes and IDs and have to add the style to every element you want to style.

    External Stylesheet Solutions for the Technically Challenged

    Unfortunately, requiring an external stylesheet really adds a level of difficulty for those users who now have to deal with uploading a separate file to a Web server.

    If you are not an experienced coder and really don’t know anything about creating an external stylesheet, here are some tips:

    • Your stylesheet file should:
      • Have the extension “.css” and have NO spaces in the name;
      • Have ONLY style rules; NOT the <style> … </style> tags!
      • Be a PLAIN-TEXT file, NOT created in MS Word or a Rich Text editor.
    • Your stylesheet file needs to be hosted on a Web server. If you don’t have a Web hosting service or FTP knowledge, I recommend setting up a Google Sites account and creating your stylesheet there. Here is my tutorial on using Google Sites to host your external stylesheet.

    Tip for Refreshing Your Cached Facebook Stylesheet

    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" />

    Increment the “v=” number to refresh Facebook’s cached version of your stylesheet (10.0, 10.1 …. 10.9, 11.1, 11.2 …. etc.), and then save your FBML box.

    If at all possible, you should choose the option to use an external stylesheet. You have much greater flexibility in applying — and making changes to — your CSS using a stand-alone stylesheet.

    Comments

    1. Hi,
      Does anybody know how long the css is cached ?
      I wanna think facebook doesn’t keep all the versions of the ccs definitively.

    2. THANK YOU! this is perfect, now I don’t have to rename my images 100 times.

    3. doesn’t work. still absolutely no styles in ie

    4. Hi,
      I followed the instructions, refreshed the cache and it didn’t work. It works with text but not with images. If you can help I would really appreciate it. I’m going a little crazy because this should work fine.
      Code used:

      <link href="http://http://www.bigklikmedia.com/echodstylesheet.css" rel="stylesheet" type="text/css" />

      <div id="wrapper">
      <fb:visible-to-connection>
      <IMG src="http://echodgraphics.files.wordpress.com/2010/11/ipadcontest2.jpg" align="top"/>
      <fb:else>
      <div id="non-fans"><IMG src="http://echodgraphics.files.wordpress.com/2010/11/ipadcontest.jpg"></div>
      </fb:else>
      </fb:visible-to-connection>
      </div>

    5. LOL! It works! I should probably look in to another line, huh?
      One last little thing. With the images being different sizes, it only shows part of the second image. I know how to fix that but it seems like a quirky thing. Thanks again for the fast response.

    6. I am looking for a way to use a seperate stylesheet for IE fixes. Usually, I would use something like this:

      <link rel="stylesheet" type="text/css" media="screen" href="http://mysite.com/applications/test/style.css?v=.0001" />
      <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="http://mysite.com/applications/test/iestyle.css?v=.003" />
      <![endif]-->

      But, facebook isn’t recognizing it. Any ideas??

      • I’m not surprised that doesn’t work in the Facebook environment. My advice would be to code your tab in such a way that it works with IE *and* other browsers. I’ve been coding a long time and, for experienced coders, it’s pretty straightforward to have your tab display properly for IE7+. For IE6, obviously there are additional issues. But I don’t think you have the option of detecting the browser within a custom tab. If somebody does know a way, let us know!

        • Thanks Tim, I did just that. It was just a matter of padding differences and as a designer, I like this to look precise. I ending up splitting the difference and calling it a day. Though, it would be nice to know how to do this in the future :)
          Cheers

    7. Hi timware,

      It isn’t working for me in Facebook. However, I’ve tried testing IDENTICAL code in a separate html document and it DID work.

      Here’s the code I’m using:

      <link rel="stylesheet" type="text/css" href="http://www.opendrive.com/files/7834879_ozWM9/white.css" media="screen" />

      <font class="white">Is this font white?</font>

      Any ideas why it works in an HTML file but not in FBML?

      Any help would really be appreciated.

      Vid

      • First, and most obvious: color: ffffff; should be color: #ffffff;

        No hash mark, no work.

        Second, if you’re going to use the old-school deprecated “font” tag, then you might as well have “color=”white” and skip the class. I’d use <div> or <p> or other accepted container tag.

        • Brilliant, got it working and that explains why the previous version worked as an html document.

          That’s what happens when I use an old file for testing.

          Thanks for your help, this is going to make coding much easier!

    8. HI Timware.

      I’ve purchased the code to add multiple tabs to our FB page. I am able to call my external CSS files directly from any browser. They do not seem to be working within facebook however.

      Here is my code…not sure whats going on… :-(

      TabOne

    9. Tim – just to say a big thanks for your help with FBML/fan/non fan & css stuff finally got my landing page working thanks to your words of wisdom here.

    10. Hi there -
      If anyone could help me out here I would appreciate it beyond measure.

      I can’t get my page to link to the external css file I have on dropbox. Here is what my code looks like


      <link ref="stylesheet" type="text/css" href="http://dl.dropbox.com/u/4350396/FBTraining.css" />

      I am at my wit’s end here. I’m still a novice when it comes to this stuff but as far as I can tell, this should work. I have cleared my browser’s cache so that shouldn’t be the issue.

      • The link to the CSS is working. Try adding “?v=10.1″ to the end of the CSS file and then everytime you want to refresh Facebook’s cached version of your CSS, increment that number:

        FBTraining.css?v=10.2

        Etc.

        • Thank you for such a speedy response…but no dice…in fact, now there is nothing showing up in my fbml page. When I take out the link to the css I get my text back…but no styles of course.

          I went through your troubleshooting thing as well but couldn’t find any glaring errors. Here’s what the first part of my code looks like

          <div id="main">
          <div id="header"></div>

          If you have any further input or ideas please let me know. Your website is fantastic by the way.

        • Finally got it sorted out. If anyone else out there is still having problems and is a noob like I am, don’t use absolute positioning if you have a container div that includes all your other divs.

          • The important thing to remember about “position:absolute” is that an element that uses this CSS for positioning is positioned relative to its containing DIV which MUST be set to “position:relative”.

    11. hi Tim,

      trying to reference the external style sheet in the fbml box. I used google sites to host based on your tutorial. Style sheets do not seem to be loading. Here are the CSS links.

      <link rel="stylesheet" type="text/css" href="https://sites.google.com/a/marketingppmt.com/www/facebook/hyperarts.css?v=10.1" />

      <link rel="stylesheet" type="text/css" href="https://sites.google.com/a/marketingppmt.com/www/facebook/tabs.css?v=10.1" />

    12. i almost threw the remote at the tv when i saw your reply. been trying to figure this out for 3 hrs. It works, thanks!!!

    13. Hi Tim,

      I was wondering if you have any tips for using an external CSS stylesheet with hotspots?

    14. Hey There! Do you know of a way to load different stylesheets depending on if the current user is a fan of the page or not? Preferably avoiding FBML since its going to be supported in the next few months… :) Any and all help is appreciated.

      • Whether or not someone is a fan of a page is data accessible via the Facebook API, so this can be detected in, say, an iFrame application. You’ll have to google around for the code, though.

    15. Hi Tim,

      Need a fresh set of eyes on this, if possible. Have tried external sheets, internal, and inline. If I strip the CSS out, HTML and images load fine. But as soon as CSS is embedded, I get nothing.

      Here’s the inline code:

      [ CODE DELETED ]

      • Andrew, I deleted your code to preserve space here, but the main problem I saw was all the absolute positioning. The most important thing to remember is that all your absolute-positioned elements MUST be inside a containing DIV set to “position:relative” in the CSS.

        Just put all your content in the containing DIV:

        <div style=”position:relative; width:520px;”>

        ALL YOUR CONTENT

        </div>

    16. Tim,

      Please help me! I am losing my mind! If you go here http://www.facebook.com/pages/Lexington-KY/Fresh-Start-Auto-Loans/163568327001356?v=app_7146470109

      You will see what I want the page to do exactly, via Chrome/Firefox. However in IE it just shows the image. I have tried the external css code. I have tried adding ‘?v=2.0′. I have edited the css code to leave out the , but to no avail. Everything that you have posted here I have tried.

      Needless to say, I am trying to get it to work how it should in IE.

      My css is located at http://www.kyfreshstart.com/testing.css

      Also here is the actual css code if needed.

      [ CODE DELETED]

      Also all links are verbatim to where they are on the web.

      Any help would be appreciated.

      Thank you,
      Casey Collins

      • Your CSS file is a mess. Look at your CSS file (testing.css), then read the part of this post following “Your stylesheet should:”

        You should read entire posts before shooting off a question.

        To repeat what’s written in the post, your stylesheet should contain ONLY the CSS rules … NO <style> … </style> tags and NO HTML.

        • I did read every post. I did delete all of those ‘un-needed’ tags. It didn’t work. That is why I reverted everything back. If you would READ what you’ve posted way ^^ there you don’t say, “no html”. I have to have the html in there to play the video and to do the mapping for where it goes.

          If you go to http://www.facebook.com/NMPRO his works perfect in all browsers.

          Can you help me with my code and what I need? I have money.

          • HTML is fine in the FBML box, just not in the stylesheet, where it should be only style rules.

            Send an email to analisa at hyperarts dot com and she’ll get back to you and help you sort this out.

    17. Hi Tim,

      You’ve got an amazing resource here that I happened to stumble upon today! Thanks! I read many of your posts and followed your directions, but am still having difficultly getting my fbml page to show properly. When I put the styles into the fbml page it works in all browsers except ie (just like you said :), but when I attach the external style sheet instead, the page doesn’t show up in any browser – the content of the tab is just blank. So I tried to add the following:


      <fb:user-agent includes="ie">
      <link rel="stylesheet" type="text/css?v=10.0" href="http://sindiwithans.com/ClientFacebookPages/FPL/chatelStyle.css" />
      </fb:user-agent>

      to the page but it doesn’t work in ie either. Strangely, the page will show in ie for a minute, and then not show the next – wierd!!! Can you help me or direct me to someone who can? Thanks!!!

    18. I am trying to emulate how Diet coke has their share button with a background but I cant seem to get it to work correctly.

      my css is like this..

      #share-me-box
      {
      background:url(http://www.escdrink.com/facebook/like-bkg.jpg);
      background-repeat:no-repeat;
      width: 520px;
      height: 40px;
      text-align:right;
      margin:5px;
      padding:2px;

      }

      can you tell me what I am doing wrong?

      • You can do it with CSS, but differently from what you have:


        #share-me-box a {
        text-indent:-9999px;
        display: block;
        border:0; padding:0; margin:10px auto;
        width: 152px; height: 32px;
        background: url(http://URL-TO-SHARE-IMAGE) top left no-repeat;
        overflow: hidden;
        text-decoration:none !important;
        }

        As you can see, you need to apply the styles to the share DIV “a” (links).

    19. Tim,

      Thank you for trying to help me. Also thank Analisa for me too. I figured it out on my own though.

      Casey

    Trackbacks

    1. [...] Facebook Static FBML FAQ / Tutorial « Static FBML: Use External Stylesheet or CSS Styles Won't Work in Internet Explorer [...]

    2. [...] with every browser, but this can change in the future (and has changed in the past). See this article for a very good summary of the [...]

    3. [...] I've noted on another post, you must use an external stylesheet for your CSS to work with Internet Explorer, using the [...]