Contact Us
  • Facebook Static FBML and Internet Explorer – CSS & Stylesheets

    IE-logoPLEASE NOTE: Internet Explorer 8 (aka IE 8) DOES NOT SUPPORT INLINED STYLESHEETS. You must use an external stylesheet and call it with the <link ref=”stylesheet” type=”text/css” href=”URL-TO-STYLESHEET” />. DO NOT USE <style> … </style> to inline your CSS styles in the Static FBML “FBML” box. Read my 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.

    Comments

    1. I am using and test your facebook pages in IE 8, your tabs look not working in IE 8. I try to use external CSS but, however, all my browsers cannot show my css style.

      What I do is paste my following code in “Edit FBML” page:
      ***********Begin***********

      <a href=”#” rel=”nofollow”></a>
      <a href=”#” rel=”nofollow”>Title</a>Blablablabla…
      ***********End************

      I am using Fan Pages with FBML application added. Thanks.

    2. OK, I solve it already. The following is my way how to add my external CSS.

      <link href=”http://yoursite.com/styles/layout.css” rel=”stylesheet” type=”text/css” media="screen"/>

      Hope this help for other.

    3. That’s all very well but in the Publisher context, your application isn’t allowed to have an external stylesheet, using the link tag, so, I’d like to know, how is one meant to make a publisher app for IE !?

    4. I’ve tried using an external style sheet and style tags, and facebook still won’t pick up my font sizes…everything else (borders, colors etc.) is working. What am I doing wrong?

      • Well, it’s hard to know what you’re doing wrong w/o seeing the stylesheet. But also be aware that Facebook caches your CSS and it’s hard to clear and get exactly what’s on the page. Sometimes you have to wait awhile. It’s very frustrating.

    5. Joe Breaux says:

      Hi Tim,
      I’m a newbie and looking to create custom facebook tabs. I’m not a coder and would like to know what is the best (visual/design) software to create dynamic html/fmbl tabs..

      Thank you,

      Joe

      • HTML can be done in a plain text editor. As for the details of using HTML markup, there are plenty of resources online for the newbie.

    6. Okay, this is really weird. I created my page on Firefox and discovered that it did not show correctly in IE 8, so I set about moving all the style info into internal as you suggested. I did not get finished before Christmas and returned today, and it is displaying correctly in IE 8 without making the changes. Did IE 8 make changes?

      • Sounds like it was a caching issue, which often happens because FB caches stylesheets and styles and rather tenaciously. If you go with an external stylesheet, make sure that at the end of the file name (mystyle.css, for example) you add this string: ?v=10.0. Look at the top of this post to see more about this.

    7. We just experienced this issue of IE not seeing embedded style on 3 different instances of IE. I say “instances” because they are 3 different version of IE (6, 7, & 8) but the same versions on the majority of other computers see the embedded styles just fine. One version was on one of our account guys computer which was mirrored off another computer that has no issue (mind you, we’re not sure if this user altered their version since installation – we’re looking into it next time he’s onsite.)

      Does anyone have any idea what might be causing a few instances of IE to not see it?

      BTW, thank you for posting. We implemented your solution and now the CSS work on all instances of IE in our tab.

      • If the IE versions were also on identical Windows OS versions, then I’m not sure what the issue is. But it might be an OS issue. If you provide the OS and IE version and a URL I can tell you what I see. But I found that IE, any version, doesn’t like styles embedded with the <style></style> tags.

    8. I am using Static FBML for the first time. I read in a blog that I should only copy the code between the body tags. I did so, but nothing shows up after I click save changes.
      What am I doing wrong?

      FB_welcome

    9. I read your articles and set up my FBML box with the following css stylesheet. Uploaded the css to my css folder and I still get nothing. Below is my link, any idea why it is not working?

    10. Hi. This is working very good with CSS. But how do I do to stop .swf to cache? I’m having problem with IE not displaying my .swf correctly after refreshing the site. I have to empty my TEMP folder everytime I refresh.

      Thanks / Fredrik

      • Not sure what you can do about the swf caching issue. You might try adding the “?v=10″ bit to the end of the URL, after the .swf. I know that works with the .css file call, as it forces Facebook to load a fresh copy of the file. Let me know how it goes, here.

    11. I am having the tag problem with IE. I removed the tag and created an external stylesheet, now using the tag and I am still having trouble. The embedded CSS works great in Safari and Firefox. I just want it to look the same in IE. Help please.

      • Sorry to hear this, Matthew. I can’t provide support here for display issues with IE, the bane of coders everywhere! This post is about getting IE to just read the styles. Once they are rendering at all, the display issues are something else entirely. There is plenty of info online. I’d start by googling: internet explorer css bugs.

    12. matthewfreyer says:

      Perhaps IE isn’t reading the style. I placed the <link> tag for my external stylesheet above my html. Is this the correct placement.

      • As it says in my Static FBML tutorial, *all* content for your page must be what would be between the <body></body> tags in an HTML file. There should be NO <html>, <head> or <body> tags in your Static FBML app. These are implemented by Facebook. Your content would be placed within Facebook’s <body> tags.

    13. matthewfreyer says:

      I understand that, Tim. I have read your tutorial several times. If the <link> tag is placed withing the <head> tag in normal html coding, and there is no <head> tags in the FBML app, where do you place the <link> tags? Let me be even clearer: Where did you place the <link> tags to call your external stylesheet for the HyperArts Static FBML Page?

    14. matthewfreyer says:

      Thank you! I have done the same but unfortunately it is still not working. Thank you for your time.

    15. Hi,

      From what I can see now – FBML is now fully functioning with css styles above the html markup. It seems to be working fine for me in IE7/8. Only since January.
      Has facebook made any changes?

    16. Hi,
      I have done but i have a problem with layout in opera browser. Facebook have made a change in a principal template. Can you help me. Thank you.

      • Sorry, Gabriel. I just don’t have the bandwidth to troubleshoot everyone’s cross-browser display issues. I’d google it.

    17. Just a note, straight up HTML didn’t work with my image mapping. It worked in an HTML test bed but not in static fbml. however i found a great tool that at least converted my image map into css: image-map.com. Worked like a charm!

    18. Hi,
      What about Flash in static FBML? OK So it’s easy enough to embed but, what if I have clikable regions in my flash that link to webpages? Not working for me. :(
      May try this image map idea! Keep you posted.

    19. No matter what I do, even from the most basic example… Facebook won’t recognize an external stylesheet.

      I think the HyperArts example is still working because it was posted back when they allowed this CSS method… it doesn’t work anymore.

      That also means there’s no way to get a hover class working on Facebook… so the button article that you link to is also of no use here.

      This article is no longer valid, and has actually wasted a boatload of my time… the rules have changed, you should update this post.

      • Randy, I just posted some Static FBML content on another Fan Page the other day, and the call to the external stylesheet worked fine. How about you showing me the code you used to call the stylesheet? Remember to surround it with the <code></code> tags. It just may turn out that I haven’t wasted a boatload of your time, but thanks for the thought :)

    20. I have read a variety of articles and they all describe this process the same as you. However, when put into practice my static FBML pages do not call the style sheet referenced. I have had others confirm that I have the call link correct <link href=”http://yoursite.com/styles/layout.css?v=10.0” rel=”stylesheet” type=”text/css” /> and I have made sure that my style sheet is uploaded to the server…

      If I save the page out at an html page an upload that it works but once I carry the pieces into FB, leaving behind the body and html tags, it breaks! HELP!

      I have a contect to launch mid next week!!

      • I’d need to see the actual <link> you’re using, Crystal. Assuming that if you try to access the stylesheet URL directly and it displays in your browser, then I’m not sure what’s going on. It’s always worked for me. I do know Facebook has been having some issues the past several days, and my stylesheets were taking forever to load.

    21. Hi, Tim…

      Well, I’m also having the same problem in loading a simple external CSS file (just one single line in the external CSS, rendering the color of the tag red, in order to test the linkage).

      Here’s the code in the Static FBML app:


      <link rel="stylesheet" ref="
      http://xxx.xxx.xxx/styles.css?v=4&quot; type="text/css" media="screen" />

      <fb:fbml version="1.1">
      ... etc.
      </fb:fbml>

      So, the tag is at the top.

      Here’s the CSS code in the file linked above:


      a {color:#F00; text-decoration: none;}

      That’s it. The only line in the UTF-8 encoded .CSS file.

      And this doesn’t work either in IE or in Firefox. What could possibly go wrong with such a simple setup?!

      P.S. No, the link to the external CSS file is not broken, and yes, my PC is plugged into the wall socket and is online. :-)

      Thanks,
      Ivan

    22. Sorry, forgot to wrap the <a> tag into <code></code> tags. :-)

    23. I’m just trying to make a simple new tab, not even an app, and I’m getting rather frustrated.
      I made the tab using notebook, saved as html and tweaked away until I got a nice simple layout.
      The html:

      <div id="wrapall">
      <img src="fb_banner.jpg" class="banner" >
      <div id="wrapper">
      <div id="pic">
      <img src="testpic.jpg" class="banner" >
      </div>
      <div id="blurb">
      So what will this text end up looking like? So what will this text end up looking like?<br />
      <a href="www.testlink.com"> Test Link </a>
      </div>
      </div>
      </div>

      The CSS:

      #wrapall {
      text-align: center;
      min-width: 520px;
      }
      .banner {
      text-align:center;
      display:block;
      }
      #wrapper {
      width:520px;
      border:2px solid #d2e0f0;
      }
      #pic{
      float:left;
      width:316px;
      }
      #blurb {
      float:right;
      width:200px;
      text-align:left;
      font-family: Arial, Tahoma, Helvetica, sans-serif;
      font-size:10pt;
      }

      a, a:link, a:visited {
      color: #000000;
      text-decoration: none;
      }
      a:hover {
      text-decoration: underline;
      }
      a img {
      border-width: 0;
      }

      So, I know the CSS link is working (and I’m using the version update number at the end after every new tweak – thanks for that great tip) because things such as the floats, the a href and the font are changing. What doesn’t work is the border (it just ends up as a thick blue line at the top) and the whole thing being centred within the space (it all goes over to the left).
      It looks fine when opened on my machine, what is Facebook doing to it?
      I’d really appreciate any help you have the time to give.

      • First, you must make all calls to images the FULL URL, not just relative. Those images don’t live on the Facebook servers. The way they’re coded, they won’t show up, definitely. Also, when you float an element, you have to use a clearing DIV after it or the containing DIV won’t size vertically to accommodate its contents. Something like:
        <p class=”clear”></p>

        CSS:
        .clear { font-size: 1px; line-height: 1px; height: -1%; clear:both; }

    24. Hi Tim!

      So, I’m trying to use the Static FBML to add a mini website on my fan page. The code below is what I’ve been testing before I go design everything and it doesn’t work. Annnd it doesn’t work! What am I doing wrong/missing? I’ve been reading other posts and trying the suggestions you’ve given them, but it still doesn’t work. Any idea what I might be screwing up?


      <link href=”http://www.intuitivdesigns.com/styles/fb.css” rel=”stylesheet” type=”text/css” />

      <div id="bkgd">
      </div>
      <div id="logo">
      </div>

      • Jaimie, Facebook had bugs this past week related to loading external stylesheets, for for canvas pages and application tabs like Static FBML, although they only reported the canvas page bug. External stylesheets seem to be working again with Static FBML, although the whole experienced spooked me and I’ve decided to just inline the CSS with the <style type=”text/css”> … </style> tags from now on. The code the Facebook generates now seems compatible with all major browsers & platforms, including Internet Explorer.

    25. Hey guys, don’t know if you’re still having a problem with the stylesheets, but here’s a possible error. If you copy and pasted the code the double-quotes might have been changed to the round quotes. This just happened to me ;) All you need to do is make sure the quotes are the “straight ” ones.

    26. is it possible to call on a background image on an FBML fan page? I have a splash image I want to set as a background image then position a vimeo over the top in the centre, using a . The vimeo is showing on the page (although it is ignoring my margin commands) but there is no background image!

      • This is done with CSS. Your containing DIV, which should be no wider than 520 pixels, can have a background image. If you’re unfamiliar with using CSS or HTML, I suggest you start with the W3 Schools, which has a great many useful tutorials.

        • Thanks Tim, I’m not too hot with CSS but good enough to know I wasn’t doing it wrong :) it was facebook pulling support of external stylesheets which was messing things up for me!

    27. Sorry!!! the FB code is

      <link rel="stylesheet" type="text/css" media="screen" href="http://lclnaturalorganic.com/chrisfb/cb/style.css?v=1.1&quot; />

      <div id="bg">

      HHH
      </div>

      • I have noticed today and yesterday that Facebook is being buggy with loading external stylesheets. It’s actually reassuring to hear I’m not the only one experiencing this. I’m keeping an eye on it to see if it gets resolved, or if FB has once again pulled out the rug.

    28. Hello all.

      I am a little confused as to why I am the only having trouble with the tag. According to wiki’s Allowed FBML and HTML tags: http://wiki.developers.facebook.com/index.php/Allowed_FBML_and_HTML_Tags is not allowed in the html.

      What am I missing here?

      P.S. I am using this tool to test the page: http://developers.facebook.com/tools.php?fbml

      Thank you, Tim!

      • I meant <link> tag

        *According to wiki <link> is not allowed. Sorry I missed the bright red note to be sure to include <code></code> tags.

        I found a discussion on facebook where you made some posts, Tim. But I still don’t see away to fix the problem. That tool I am using to preview the html gives me the error message: COMPILE ERROR: FBML Error (line 1): illegal tag “link” under “fb:profile”

    29. Yay, it works! Thank you, Tim!

    30. Hi. I have a link in one of my page tabs that takes you to another but whenever i test it with ie8 the page doesn’t load properly. If i click on the tab itself it loads completely. What can be the problem?

      The only way i can make it completely is to open it in a blank page but i don’t want to that. its there a way to open the tab in another page with ie but let the tab open in the same page with the other browsers?

      Thanks in advance.!

    31. Ranganath says:

      Hi, I have png files in my page and as usual it’s not working in IE6, so any fix for this in FBML.

    32. colin85 says:

      Hi Tim,

      Great to have someone shed light on this topic. I’m a HTML and CSS novice but my static FBML displays and functions correctly apart from in the IE browsers. I put my code posted below into a .css file, hosted it on our website and tried calling it using…


      <link href=”http://thinkhousepr.com/fbimagery/stylesheets/halloffame.css” rel=”stylesheet” type=”text/css” />

      This just shows up blank, do you have any advice or point out where I’m going wrong?

      Thanks,

      Colin

      [ CODE DELETED ]

      • Colin, Your <link> to a stylesheet points to a file that has the .css extension but is NOT a stylesheet. It’s got lots of HTML in it and other random stuff. Use the <style> tags for you styles.

        Also, as a novice, you should avoid absolute positioning. It can be very tricky to use and I don’t recommend amateurs use it. Two rules for absolute positioning you must be aware of:

        1) The containing <DIV> for an absolute-positioned object must contain the style: “position:relative”.

        2) Make sure you set a height on the containing <DIV>, as well. Absolute-positioned elements are outside the document flow, and thus don’t cause a containing element to expand to accommodate them.

    33. Just wanted to say thanks about explaining how to get Facebook to re-cache my css file. You just saved me hours of head scratching. Thanks!

    34. colin85 says:

      Thanks Tim for the advice,
      I really have to get a grasp of the basics of CSS before I get ahead of myself. I’ll be back I’m sure once I figured it out for myself!

      Colin

    35. Ok, this might sound dumb! I am new to css and only know a little. I added a FBML to my facebook page then added the stylesheet link provided as an example at top of page then added the FBML stylesheet link provided as an example. Changed the line of code on the FBML stylesheet link to where it is on my server and nothing is showing up? any help with this would be great thanks!

    36. It really seems that linking to an external CSS file doesn´t work in any way these days.

      Can anyone tell me if it is possible to embed the css to the html in cases where I have multiple classes and attributes I would like to style, I mean, like hover states and button colors, at the same time.

      I have a situation where I should make a “rollover button” for Facebook a FBML page, and the CSS goes like this:

      .menulink {
      background-color: #2daebf;

      .menulink:hover {
      background-color: #007d9a;
      }

      I know how to embed it using the and tags before the html in Facebook, but how the hell am I gonna figure this out when embedding the css within the html with

      <div id=johndoe" style="css goes here;">

      tags?

      Thanks in advice!

      • First, I’m not sure what you’re doing, but we develop Fan Pages professionally and external CSS is working across all major browsers and platforms. I would suspect your problems have more to do with CSS knowledge, judging from your question.

        Second, I don’t know of a widely supported method to inline a hover effect in a <a href /> tag. Read this discussion.

        In order to make your life easier, I would concentrate on getting your external stylesheet problems figured out. :)

    37. According to this: “calls to external CSS files are no longer supported, in new fan pages” linking to an external stylesheet is impossible in Facebook environment these days. At least I can´t get it done.

      There´s an odd behaviour with IE in Facebook. If I put the FBML page stylings inside tags at the beginning of a FBML page code, other browsers than IE style the page with no problems, everything is perfect. However, IE renders the page only when I put the stylings right in to the divs of the code, you called it “inlining” or something. Well, this is fine to me, but it ruins my hover effects for buttons because I can´t figure out how to implement multiple styles with method. For some reason, IE 6, 7 and 8 keep ignoring my blah blah… content completely.

      I´m not too deep in CSS and FBML’s crippled pages, that´s very true :) .

    38. Ah, forgot the code tags from the previous…

    39. I have a question that’s been puzzling me. I have my site integrated into FB or in the process I should say, everything works fine I have no real issues with any of my css but I’m looking for an easy way to switch between an in FB app css page and out of FB app css page. Basically so I can switch things up to fit the iframe without messing with my existing site css users can access without FB.

      Any thoughts would be great thanks.

      Noelle

      • If you’re iframing a page in a canvas app and want the CSS for the page, which I assume also exists standalone, outside of Facebook, to accommodate both the standalone page and the page when it’s iframed …. You can probably write a script that detects when the page in question is a “child” page and when it’s at the top level (a “parent” page). I can’t write this for you, but it could be written in JavaScript or perhaps another language.

    40. Thanks here was our fix after reading your reply

      <script>
      if( window.location != window.parent.location ) {
      document.body.className = [document.body.className, 'fb'].join(' ');
      }
      </script>

      then we just applied body.fb to our css rules

      • Awesome! Thanks for reporting back. I wish more folks who I assist would provide the courtesy of a success, or failure, report. Actually, I usually hear about the failures, but rarely the successes. Nice work, Noelle!

    41. So i finally got the style sheet to work, but it is making my image not show up now…
      Here is my Facebook page:
      http://www.facebook.com/pages/Salmon-Arm-BC/Techlectric/118431861546728?v=app_4949752878

      I have spent so many hours on this, and just want to get it to work.
      Thanks in advance for the help, and thanks for your posts, as they are very helpful so far. This is a valuable tool for business and am excited to have it working:)

      • What’s the URL to the stylesheet and how are you calling it in the <link /> tag?

      • I looked at your stylesheet and it looks fine. So probably your <img /> URLs are incorrect. I assume those are in the FBML box for the custom tab, right?

      • I think the issue with your image is that you have an empty “width” value: width=”. I imagine IE is choking on that, probably interpreting it as “0″. To be safe, add the height and width values to the <img /> tag, and I suspect that will solve your IE 8 problem.

    42. Yes:

      I thought it might be because I had some inline styling in conjunction with the external style sheet, so I removed them. There was a couple things I had, which I deleted hoping to make it work. Here is my current code:

      Since you like us, we Love You!
      Use the code below to save 25% in store!*

      *some conditions apply*

      To access the coupon code, please click the ‘Like’ button to the right of the profile picture.

    43. can I not add code to comments?
      I added the facebook code to our ftp:
      http://www.techsmart.ca/facebook_code.doc

    44. Hey Tim,
      Thank you for your help so far. I have an issue that is different than any problems I’ve heard of. My ‘non-fan’ page doesn’t show up correctly in Internet Explorer, but Firefox and Chrome both work. The image I want to use is the only thing not showing up. My text is showing up as though the style property position:relative should, but no image is there.
      If i click like, I can see the image I have for ‘fans’ and everything works fine, it’s just the non-fan image. I don’t get it, because it works in other browsers and it’s not an external stylesheet issue, otherwise my text wouldn’t be appearing at the very top of the page.

      Is Facebook changing things again, or am I the only one with this issue?
      http://www.facebook.com/pages/Salmon-Arm-BC/Techlectric/118431861546728?v=app_4949752878#!/pages/Salmon-Arm-BC/Techlectric/118431861546728?v=app_4949752878

      Thanks

    Trackbacks

    1. [...] SHOULD NOT use a <style type=”text/css”> tag — it works in most browsers, but NOT in Internet Explorer (of course); you can, however call an external style sheet via <link [...]

    2. [...] my previous post on CSS and Static FBML, I’d stated that Internet Explorer didn’t support the <style></style> tag, but [...]

    3. [...] Internet Explorer and Static FBML: Using External Style Sheets for CSS This insightful article discusses aspects of applying CSS styles to your Static FBML application in Internet Explorer versions and other browsers. The post includes an important update that takes into account changes in Facebook’s API that affect the implementation of CSS styles in static tabs. [...]

    4. [...] Internet Explorer and Static FBML: Using External Style Sheets for CSS This insightful article discusses aspects of applying CSS styles to your Static FBML application in Internet Explorer versions and other browsers. The post includes an important update that takes into account changes in Facebook’s API that affect the implementation of CSS styles in static tabs. [...]

    5. [...] Internet Explorer and Static FBML: Using External Style Sheets for CSS This insightful article discusses aspects of applying CSS styles to your Static FBML application in Internet Explorer versions and other browsers. The post includes an important update that takes into account changes in Facebook’s API that affect the implementation of CSS styles in static tabs. [...]

    6. [...] Internet Explorer and Static FBML: Using External Style Sheets for CSS This article discusses the deeper aspects of CSS styling for your application FBML static versions of Internet Explorer and other browsers. The message includes a major update that takes into account changes in the Facebook API that affect the application of CSS styles of the static tabs. [...]