HOW TO HOST EXTERNAL STYLE SHEETS: New tutorial on how to set up free hosting of your external CSS stylesheet and images using Google Sites...
UPDATE Jul 31 2010: Again, inlining your CSS styles via the <style> tag isn't working with Internet Explorer 8. If you call an external style sheet via the <link> tag, then IE 8 is happy. This is a problem on Facebook's side, as nothing changed in the past few days with IE 8 and Facebook is constantly fiddling with their API.
UPDATE Apr 17 2010: It seems that external calls to CSS are working again, after some days of not working. It's hard to know when Facebook has changed its API or just having a meltdown, particularly when they don't issue a bug alert. Yes, there was a Facebook bug report 9601 specifically regarding canvas pages, but nothing that addressed Static FBML application tabs. I'm going to go exclusively with inlined CSS using the <style type="text/css"> ... </style> tags. They now work across all major browsers and platforms and just seem, well, safer.
Pre-Update:
Facebook has changed its API regarding the implementation of CSS styles in Static FBML application tabs.
You can no longer use the <link> tag to call an external stylesheet:
<link href="http://yoursite.com/styles/layout.css" rel="stylesheet" type="text/css" />
However, after much testing here at HyperArts, I've determined that the use of the <style type="text/css">[CSS rules]</style> works across the major browsers on both Macs and PCs:
<style type="text/css">
.some-class { margin:0; font-size:14px; }
#some-id { margin:0; font-size:14px; }
</style>
In my previous post on CSS and Static FBML, I'd stated that Internet Explorer didn't support the <style></style> tag, but now it does (even IE 6!), no doubt due to a change in how Facebook renders that tag.
Although you can also inline styles (ex. <p style="margin:0;">), the easiest-to-maintain method is to add the <style></style> tag at the top of your Static FBML box, as shown above.
Please post a comment here, if your mileage varies. And although it seemed yesterday that pre-change fan pages weren't affected by this and still supported external CSS calls, today this doesn't appear to be the case. If you make any changes to your existing application tabs, external stylesheets won't be supported. PERIOD!
Interestingly, I couldn't find any information from Facebook that such was the case, and this Facebook bug report — that people thought related to this issue with Static FBML — concerns an issue with FBML canvas pages with linked stylesheets throwing a 500 internal server error with the message: "Invalid parameter: Unknown error."
Static FBML Code Templates for Sale!
#1 by Hayden Hancock - April 16th, 2010 at 10:19
I was just banging my head wondering why the heck my external stylesheet wasn't working properly. The tag now works perfectlyas you've stated in this article.
Thank you for your informative articles on this subject. I am new to FBML and you have done a good job explaining the basics.
#2 by Ken Hood - April 16th, 2010 at 12:04
You guys rock. You are the first (that I can tell) that have identified this. I admin about 40 pages, and none of them seem to have been affected. However, I just setup a new Static FBML Tab that references my external style sheet and YES- you are correct. I will try your solution. Sure wish FB had something on this in their developers wiki.
#3 by Ken Hood - April 16th, 2010 at 12:15
OK just used your workaround. It works. Again- thanks so much. Also, I searched in twitter and found a link to the dveloper bug report page... it (seems?) that this is a temporary bug that they will fix?
#4 by timware - April 16th, 2010 at 12:28
What's the link to that bug report page? And you're sure it's not the bug report regarding CANVAS PAGES and external stylesheets which is a different deal. They could be related, but I doubt it. Whatever Facebook changed also resulted in Internet Explorer recognizing the <style text="text/css"> tag, likely due to a change in how Facebook outputs the code.
#5 by Ken Hood - April 16th, 2010 at 13:34
Tim- here is the link http://bugs.developers.facebook.com/show_bug.cgi?id=9601. Since I am neither a programmer nor the son of a programmer, (humorous biblical allusion) and do not have developer account, I could not login to see the details of this. So it is possible (likely) I got this wrong. Sorry. Anyway... thanks again for the excellent help you provide. I may have to get some paid help in the future and you would be my first call.
#6 by timware - April 16th, 2010 at 13:53
No, Ken, that's the bug report for canvas pages, which was definitely a bug and temporary. I think the external-CSS change for Facebook is intentional, particularly because they also changed how they generate the HTML for the inlined stylesheet call -- using <style> tag -- so that it now works in Internet Explorer. So the new best way to apply CSS to Static FBML is using the <style></style> tags before the HTML.
#7 by Ken Hood - April 16th, 2010 at 14:32
Thanks Tim. Seems like Mike below misunderstood as well. You explanation makes sense, and it's fine if FB decided to use style sheets that are included in the code rather than externally referenced. Maybe the style changes I make will update in real time rather than the 5 minute lag times I had to live with before. Hmm.. we can hope. I will check.
#8 by Mike B - April 16th, 2010 at 13:28
There is a Facebook bug listed about this now, and it looks like cached linked stylesheets are fine, but even in older pages, if you try to send a new file (i.e. change the version) it will break that page also.
http://bugs.developers.facebook.com/show_bug.cgi?id=9601
#9 by timware - April 16th, 2010 at 14:39
Mike, Although this isn't a bug report relating to the Static FBML question (it addresses an issue they were having with canvas pages), it does appear that even older fan pages will not support external stylesheets. I would recommend that everyone switchover to using the <style text="text/css"></style> tags to inline their styles.
#10 by estong - April 16th, 2010 at 16:08
why oh why did FB removed this featured (i.e., call external stylesheet)
anyways, thank you very much for posting a quick solution.
#11 by timware - April 16th, 2010 at 17:14
Eh, no big deal really. As long as you can use the <style> tag, it's within the range of tolerance
#12 by Ken Hood - April 18th, 2010 at 06:57
Mike- I think I'm with you on this one. I also saw this morning that the bug was fixed. However, I will design my new Static FBML Tabs using inline CSS. Even though external sheets for me are easier to maintain for multiple clients... your word "safer" carries the day. Thanks for all your testing and hard work.
#13 by timware - April 18th, 2010 at 09:20
Just to clarify, that bug report 9601 said nothing about Static FBML or application tabs, just canvas pages, and said the error was "500 internal server error with the message: "Invalid parameter: Unknown error." So, other than it being a problem with external stylesheets, it didn't address the problem we were seeing with Static FBML. And I too have decided to just stick with inlining styles with the <style> tag and avoid any future disruptions, or at least try to!
#14 by dw3 - April 19th, 2010 at 09:30
I'm new to the FBML App .. experimenting with a custom tab on my Facebook Fan Page for my business.
Can someone help me with a code I need to remove the breaks/margins from in between my images. I would like everything to connect without any white space. Help! ...
You can view the page at http://facebook.com/dw3design .. under the 'dw3 Design' tab. Thanks.
#15 by timware - April 19th, 2010 at 09:40
In the absence of any code, I'd say to make sure that you don't have <br /> tags between images, and no spaces. In the CSS, explicitly set the margins and padding for img to "0". Other HTML and CSS help can be found at W3 Schools.
#16 by dw3 - April 19th, 2010 at 10:05
Ok. Don't have any tags between images and removed spaces.
I see according to this post we can no longer use the tag to call an external stylesheet .. would this be the proper code to use for my no margin/padding CSS? :
img {margin: 0px; padding: 0px;}
#17 by dw3 - April 19th, 2010 at 10:08
*removed the so it would show in this post
style type="text/css"
img {margin: 0px; padding: 0px;}
/style
#18 by timware - April 19th, 2010 at 10:14
That looks correct, and I assume (because the code didn't come through) that the "< " and ">" are missing only from your example?
Also, external stylesheets seem to again be working, although I'd advise using the <style> tag to inline the CSS, to avoid problems down the road.
#19 by dw3 - April 19th, 2010 at 10:47
ok .. the breaks/margin problem seems to be only in Firefox and Safari browsers. In IE, there are no breaks .. didn't even need CSS or Style tags.
But for Firefox/Safari, neither the link CSS or style tags for 0 img margins/padding are working .. any suggestions?
#20 by toph - May 21st, 2010 at 11:35
I'm having the same 2 pixel space between image issue when viewing in Firefox...
can I set padding to -1 ?
I'm trying it now.
#21 by timware - May 22nd, 2010 at 08:48
The first step would be to remove *all* linebreaks from the table cells <td></td>. I assume you included the: cellspacing="0" in the <table> tag? You also might try adding the "border-collapse" CSS property, along with the standard HTML table properties, eg:
<table style="border-collapse: collapse; border:0;" cellspacing="0" cellpadding="0">
#22 by aaron - August 18th, 2010 at 15:43
In the <img /> tag, add:
style="display: block;" to get rid of white spaces.
#23 by Julian - August 31st, 2010 at 09:49
Aaron's answer works! Use
display:block
#24 by Mike B - April 19th, 2010 at 09:39
I can confirm that the fix applied for the bug report listed above did (currently) seem to fix external stylesheets again in StaticFBML pages. That being said, I agree that it might just be safer to embed the code in style tags to avoid similar bugs from wrecking havoc down the road.
#25 by timware - April 19th, 2010 at 09:50
Yeah, I think it did too. But it's weird that now you can inline CSS with the <style> tag and it works in Internet Explorer. It didn't used to, but now that it does, that's the way to go, I think. Some say, Oh, you must separate the structure from the presentation, but one peek at "view source" on a Static FBML tab shows the absurdity of that!
#26 by Brad H - April 20th, 2010 at 14:54
<style type="text/css">img {margin: 0px; padding: 0px;}
</style>
<table id="Table_01" width="700" height="909" border="0" cellpadding="0" cellspacing="0" valign="top">
<tr valign="top">
<td valign="top"colspan="3">
<img src="http://i1044.photobucket.com/albums/b450/trinity-promotions/facebook_page_01.gif" class="img" width="351" height="213" alt=""></td>
<td valign="top" colspan="4">
<img src="http://i1044.photobucket.com/albums/b450/trinity-promotions/facebook_page_02.gif" class="img" width="339" height="213" alt=""></td>
<td valign="top" rowspan="3">
<img src="http://i1044.photobucket.com/albums/b450/trinity-promotions/facebook_page_03.gif" class="img" width="10" height="900" alt=""></td>
</tr>
[CODE TRUNCATED]
</table>
can not get rid of the white space please help
#27 by timware - April 20th, 2010 at 15:00
My advice is get ride of all the spaces and linebreaks in the TDs.
#28 by Tim - May 2nd, 2010 at 10:28
Hi there!
Is there anyway you can take a look at this code and tell me why I am getting a blank page? I made a what I thought was a simple page in a wysiwyg editor and changed the image and j/s source tags to full urls and nothing?
div#container
{
width: 520px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
body
{
text-align: center;
margin: 0;
background-color: #3366FF;
background-image: url(http://www.makeitgomedia.com/garoofing/images/index_bkgrnd.png);
color: #000000;
}
a
{
color: #FFAD5B;
}
a:hover
{
color: #0000FF;
}
GA Roofing & Construction Services
Welcome to our Facebook Page. We hope you enjoy your visit here - If you would like to become a "Fan" of our company, please click the like button. Also be sure to visit our corporate website at this address -http://www.garoofsnow.com for more information about our company and the services we provide.
var fo = new SWFObject("http://www.youtube.com/v/Mh-Yr-elppQ&rel=0", "YouTube1", "479px", "300px", "8,0,0,0");
fo.addParam("quality", "High");
fo.addParam("scale", "ExactFit");
fo.addParam("wmode", "Transparent");
fo.addParam("play", "true");
fo.addParam("loop", "false");
fo.addParam("menu", "false");
fo.addParam("allowfullscreen", "false");
fo.addParam("allowscriptaccess", "sameDomain");
fo.write("YouTube1");
Thanks,
Tim
#29 by timware - May 2nd, 2010 at 11:10
What you provided makes no sense. I assume you surrounded those styles with the <style> ... </style> tags? And that you put some HTML markup around your content? You define containers in your styles, but don't have them in your HTML. And there's a tutorial on this blog for embedding Flash and/or YouTube videos, but it appears you didn't see that.
I suggest you learn more about coding. I don't have the bandwidth to provide elementary CSS/HTML support.
#30 by Tim - May 5th, 2010 at 23:27
yes - im sure it doesnt make sense because i could not get the flippin code to paste correctly. I had the ... and html markup and it worked fine on my server - just not in fbml. So the search continues. Thanks anyway.
#31 by timware - May 6th, 2010 at 06:42
It says very clearly above the comment field, in bright red text, to surround any code in your comment with the <code> ... </code> tags. It will then display properly
#32 by chris - May 6th, 2010 at 15:19
Hi. I have a paypal add to cart button on my static fbml, but for some reason it doesn't work in ie6 and ie7 i don't know what the problem is...
I have a regular div. and then the button code after but whenever i click on the link it redirects me to the paypal home page. any help...???
#33 by timware - May 6th, 2010 at 15:54
Sounds like more of a PayPal configuration issue, Chris. And, as you may know, IE 6 and, to a lesser extent IE 7, can be, um, difficult.
#34 by Ciaran McHugh - May 19th, 2010 at 08:52
Hi, trying to add a picture to my FB custom tab using this code but not working...
<img src=”http://www.mrsite.co.uk/usersitesv9/ciaranmchugh.com/wwwroot/userimages/Default%20Header%20V%206.jpg”/>
Page is http://www.facebook.com/pages/Made-In-Sligo/108302759214620?v=app_4949752878#
never wrote code of any type before today...
#35 by timware - May 19th, 2010 at 09:37
Never have spaces in URLs, not in the file name or directory. Never.
#36 by Ky - May 21st, 2010 at 13:34
Hello Tim. Thank you for all of the useful information. I am currently customizing a facebook page, and I am trying to connect the dots from your message. Using HTML 4.0, you can style your page using an external CSS file. FB doesn't allow external files anymore, so you place where to make this apply to the page? Thank you.
#37 by timware - May 22nd, 2010 at 08:52
Facebook appears to be supporting external style sheets now. It was a glitch that stopped them from work temporarily. But I decided to just put the styles in the body of the FBML box with the style tag:
<style type="text/css"> styles here </style>
Then your HTML....
#38 by donnam - May 28th, 2010 at 20:57
Does anyone know why Static FBML suddenly doesnt work on FB Pages tabs any more? I know that FB has downsized some people's tabs from 760px to 520px but theoretically if i also downsize my graphic from what was, to what is, it should still show up.. seems some people's pages are squished, some are blank and some have tiled the content - wonder if you've heard anything. thanks.
#39 by DWin - May 30th, 2010 at 00:04
Your FBML designs are really nice. Maybe you can help me, because I don’t yet understand code as well as I would like. I am trying to place a newsletter optin box as a background image and then the form code on top.
This is what I have and it is certainly not working. I don’t quite understand using styles and inlining css with html.
Where am I messed up?? Should I not put this in a table? Thanks for any help.
<div class="table" >
<table width="520" cellpadding="5" align="center" bgcolor="#FAFCC5">
<tr>
<td colspan="2" border="0" margin="-5"><img src="http;//www.mywebsite.com/image.png">
</td></tr>
<tr>
</table>
</div>
#40 by Nicholas Pavkovic - May 30th, 2010 at 23:39
One reason for external style sheets: Downloadable/rendered fonts. But I have a feeling these don't work in FBML for other reasons. Does anyone have experience using TypeKit or the Google Font API in FBML?
Thanks,
Nick
#41 by Tara - June 7th, 2010 at 09:13
Hi, Tim. Thanks so much for all the useful info here, it has been priceless
I have a Static FBML tab on my page and it seems to work fine except that the CSS image map doesn't appear unless you push reload after the initial loading. Have no idea what could be causing this? Any advice?
Thanks, in advance!
#42 by David Stein - June 17th, 2010 at 10:59
At http://www.facebook.com/SwimAndSweat I have numerous fan pages written in FBML with external css for the past six months with no problems. Suddenly the pages are blank only for users signed into Facebook. If you are not signed in they appear fine. When I log in as administartor the same results so I am unable to manage and edit any pages. Any ideas what's going on?
#43 by Nick - June 17th, 2010 at 13:57
I'm trying to load several images and getting a nasty gap in between the images. can't seem to figure out why. they are sitting inside of a div. please help! have to launch soon! follow the link and click on the terms & conditions at the bottom right of the image. the code is also below.
http://www.facebook.com/pages/Boulder-CO/STUDIO-5-ELEVEN/119164664760815?v=app_7146470109&ref=ts
<div style="position:fixed; z-index: 1" id="termsBG" style="display: none;">
<img src="http://www.officialtwitterguide.com/WHotel/tropical_giveaway/terms_1.jpg" width="526" height="385" border="0" /><br />
</div>
#44 by timware - June 17th, 2010 at 16:44
Well, it looks like you might have fixed this, but issue would be the <br /> tags between each image. If you add:
style="display:block" to each <img> tag, and remove the <br /> tags, this should fix it.
#45 by Brian - June 22nd, 2010 at 21:25
Thanks for all of your tips and howtos, Tim. While I understand the push for the inline style tags, there is a very valid arguement for using externally linked style sheets.
The Static FBML plugin seems to have a finite character limit. I pasted in 9000 characters (including my editor's white space characters). The editing textfield of Static FBML seems to be accepting only 8000 or so. While my CSS is only roughly 2500 characters, it is enough to prevent all of my code being entered.
#46 by timware - June 22nd, 2010 at 21:53
No, I'm back to using external style sheets. I haven't tested your "character limit" but there are other reasons for using external stylesheets, particularly around background images called in inlined styles as opposed to external CSS. So I agree that external is the way to go. Thanks.
#47 by Pete - July 1st, 2010 at 03:07
I'm having issues with IE8 not loading the css when you first click on a tab. It only seems to load the css when you refresh the tab. When you click away and then back again the same issue happens again, it's not until you refresh the tab that the css loads. I've tried an external css but a lot of the styles don't get picked up, font-size of p tags for example, so I'm stuck with using an inline stylesheet. Has anyone come across this problem before?
#48 by Sean - July 5th, 2010 at 03:42
Thanks "timware" for advising to put the style=”display:block” in the tag. I've been trying to fix the problem with the gaps for a long time.
#49 by donnam13 - July 12th, 2010 at 21:02
i am having issues with my FBml page - the image wont show up. i am using similar code on my second fb page, but instead of the images being in photobucket they are on a website so am wondering if thats the issue? here's the code I'm using that did work but since the change to the page width by fb, no longer works
[ CODE DELETED]
#50 by timware - July 13th, 2010 at 07:18
You shouldn't have spaces in URLs, and your image URLs have spaces (represented by the %20 character).
The <style> tag should be the first thing in the FBML box.
#51 by Shahor - July 13th, 2010 at 09:24
I'm facing a real problem I can't deal with right now ...
Here is my sample of FBML :
<style type='text/css'>
#plop : {
background-color:pink;
}
</style>
<div id="plop">
blal
</div>
Do you have an idea of why there is no code between the two "style" tags ?
Thanks a lot !
#52 by timware - July 13th, 2010 at 09:36
Delete the ":" after #plop and all will be well.
#53 by Shahor - July 13th, 2010 at 10:00
Ok, you got this one, I mistyped being tired...
What if I want to condition my style to wether the user is fan or not ? How to do that ?
#54 by Misty - July 19th, 2010 at 13:17
Do you know if there's a limit to the number of images that can be used in a single FBML box? I'm trying to place 9 images (with identical code except for the links, which I've double checked), and only 7 of them are showing up.
#55 by timware - July 19th, 2010 at 13:42
There may be but I don't know what it is. But it may also be the total file size of the page with all the images, so a file-size limit.
#56 by Evy - July 22nd, 2010 at 11:13
I have copied and pasted a code from our website. Figured out to just use content between body tags but page renders funny. I have a link to our style sheet where do you put it since generally you put it before the tag? I just copied and pasted from our website
#57 by timware - July 24th, 2010 at 10:11
Put the <link> tag first.
#58 by jamEs - July 29th, 2010 at 12:54
You mention that the inline style method should work in all browsers, yet when I check in IE7 and 8 neither renders any CSS. Since my page is new and didn't exist before this change over external stylesheets are no longer working for me. And inline styles seem to work rather poorly. Am I basically screwed now because of these changes? I had a perfectly rendering site in FF and Chrome, but totally useless in IE.
#59 by timware - July 29th, 2010 at 19:27
Our experience is that external stylesheets work the best across all browsers including IE. I suspect it may be an error in your <link> tag? Inlining styles using the <style type="text/css"> almost works but we've found Facebook inexplicably shrinks the size of background images called in the inlined CSS. In recent months we've had no problems using external CSS.
#60 by jamEs - July 30th, 2010 at 06:23
I discovered I needed to put ?v=1.0 to get my external stylesheet URL to get it to work. Refused to work otherwise.
#61 by mgranger - August 2nd, 2010 at 07:01
I've made the change to a linked stylesheet using your methods above but with no luck. I've tried using the ?v=40.0 code and that doesn't seem to work either. I've copied your code exactly and changed the URL. Does it take some time for Facebook to cache the page and show the changes?
#62 by timware - August 2nd, 2010 at 09:30
Well, since you didn't include any code, I can't really help you.
#63 by mgranger - August 2nd, 2010 at 12:21
It was a general question to begin with but I'll include some code for you to look at:
<link rel="stylesheet" type="text/css" href="http://www.wrcase.com/facebook/fbmlpage/facebook.css?v=40.0">
<div id="main">
<div id="leftside">
<img src="http://www.wrcase.com/facebook/fbmlpage/images/fbhome_01.jpg">
</div>
Everything was working fine up until about a week ago then IE stopped working. Now that I've linked the css, nothing is working except the html. I'm sure its something very simple that I'm missing or have wrong.
Thanks for your help.
#64 by timware - August 2nd, 2010 at 12:55
It looks the same in Firefox on the Mac and IE 8. I just tested it. It shows a red image along the left side and that's all. Is that your intent? The fact that both browsers show the same thing may be a good sign.
#65 by mgranger - August 2nd, 2010 at 13:16
If you take a look at our Facebook page found here: http://www.facebook.com/wrcase?v=app_7146470109, the layout is broken because it doesn't appear to be calling the css file.
#66 by timware - August 2nd, 2010 at 13:37
mgranger: It looks broken in Firefox on the Mac, so this isn't an IE 8 issue. Your CSS URL looks okay, goes to the actual .css file, so that's good. Send the HTML.
#67 by mgranger - August 3rd, 2010 at 06:41
I'm fairly certain it's not the html. Everything was working fine with the css inside tags in firefox (and IE up until about a week ago). Then when I linked the css file, everything is broken. This leads me to believe that the css file is not linked correctly.
#68 by Kobe - August 3rd, 2010 at 03:26
hi
i'm doing my fbml in css, it worked great until today.
IE doesn't display it anymore (works in firefox)
this is an example of the code i'm using
[ CODE DELETED ]
I would appreciate any help - i don't want (and to be honest don't know) to do it all over again using divs or external styles...
thanks
kobe
#69 by timware - August 3rd, 2010 at 06:41
Kobe: I deleted all your code for brevity, but it contained inlined CSS using <style> ... </style> tags. You should transition to using external stylesheets for your CSS, as IE 8 is, as you know, choking on the <style> tag for some reason and not rendering the styles. Who knows when this will be fixed?
Read my new tutorial on creating your external CSS stylesheet and hosting it using Google Sites. This is the way to go. Spread the word!
#70 by LA - August 3rd, 2010 at 15:02
Other than using external style sheet as you suggested, anything you can see to keep IE from displaying image?
[ CODE DELETED ]
#71 by timware - August 3rd, 2010 at 18:04
To keep the comments "tidy" I removed your code, but it looked fine and tested fine. There's a line break after the "height" attribute in #wrapper that you might want to correct. Other than that, it was fine.
#72 by LA - August 5th, 2010 at 23:58
Thanks for the review of the code. We are going crazy here because we cannot figure out why IE doesn't like like the code and doesn't show the background image.
I posted the facebook source at: http://be-found.net/demo/facebook/facebook.fbml adn the css at http://be-found.net/demo/facebook/wic_facebookv1.css
Love any insite you have. FF and Safari display just fine; IE doesn't bring in the image.
#73 by LA - August 6th, 2010 at 00:00
Forgot to give you the facebook link http://www.facebook.com/pages/Be-Found-Dont-be-lost-if-cyberspace/110560198962230?v=app_4949752878
#74 by San Diego Roofing - August 4th, 2010 at 05:13
I've tried an external css but a lot of the styles don't get picked up, font-size of p tags for example, so I'm stuck with using an inline stylesheet. Has anyone come across this problem before?
#75 by timware - August 4th, 2010 at 05:43
Then you must have errors in your CSS or HTML. There's certainly no compromise in using external CSS and, if done correctly, should work fine. If you're a newbie to CSS, you should know that it is fairly complex to really understand. It took me years.
#76 by Steven - August 5th, 2010 at 08:04
Hi,
A few months back I added a 'Welcome' tab to our FB business page according to your perfect instructions and all was well. In the last couple of days I have changed the code slightly and reloaded but the styles do not work. I have now changed to using inline as you suggested but not all of the styles work. When I test the fbml on FB it looks ok but not on our page. Going slightly mental at the moment. Can we still link to external css or not?
The page should you be interested is http://www.facebook.com/MidpointCreative
Any help would be great
#77 by timware - August 5th, 2010 at 08:13
Steven, Read the updates at the top of this post. External CSS is the way to go.
#78 by Steven - August 5th, 2010 at 08:33
Hi Tim,
Thanks for the quick reply
I have tried linking using the following
but still no luck
#79 by Steven - August 5th, 2010 at 08:34
<link href="http://midpointcreative.com/fbook1_styles.css?v=7" rel="stylesheet" type="text/css" />
#80 by timware - August 5th, 2010 at 08:39
Steven: That URL to your stylesheet is incorrect. It results in a File not Found error. PLEASE check URLs directly in your browser! Incorrect URLs are the reason for 90% of the problems people have with FBML.
#81 by Steven - August 5th, 2010 at 08:42
Ok. Thanks again
#82 by timware - August 6th, 2010 at 08:33
LA: There's much wrong with your code. The .fbml document's <link> tag has the URL to the stylesheet without the "src=" piece which is crucial. And the URL for the stylesheet is incorrect anyway, returning a 404 not found error. So browsers will go to your inlined styles and per recent post about IE 8 and inlined styles, IE 8 isn't reading the <style> tag. Other than that, everything looks perfect
I think if you fix those things, which are very basic, things will be better.
#83 by Joshua - August 7th, 2010 at 23:20
Be nice if Facebook would choose a method for developers to use CSS styling and stay with it.
#84 by Joe - August 8th, 2010 at 16:04
I LOVE your blog. Always direct, informative and helpful!
Quick question for you. I've implemented external stylesheets as you recommend, but they do not seem to work for me if I'm using background-image or an image map (in any browser). If I stay away from those two items, everything is fine in all browsers (including IE 8).
Any ideas?
#85 by timware - August 8th, 2010 at 17:36
Well, they should work! Make sure your URLs to the images are correct in the CSS by trying to access them directly in your browser. Also, I've seen some folks using single quotes around the URL in the url(http://... ) style. They're not necessary. Remember that URLs after the domain name are case sensitive. If none of the above helps, show me some code!
#86 by Richard - August 20th, 2010 at 03:00
Hi,
I wonder if you can help me out please.
I have written this code which renders perfectly across all browsers: http://news.gurucareersnetwork.com/Social/Facebook/Facebook_Page.htm
However when I put it into Facebook i get these annoying White gaps between the images. See: http://www.facebook.com/pages/Guru/334635710636?v=app_4949752878&ref=ts
Can you take a look and let me know where i might be going wrong?
Thanks in advance
#87 by timware - August 20th, 2010 at 07:10
Add the display:block style to the <img /> tag:
<img src="URL" style="display:block" />
If that doesn't work, try also removing all line-breaks.
#88 by Vincent - August 24th, 2010 at 09:12
Hi,
I have the same problem, with white gap between my line of pictures.... But I've tried to put this code : ....
It's working for the begining, but, I have a link code in my code.... and, It's not working, because, with this display:block, my link is under the picture....
You can see the result here :
http://www.facebook.com/pages/Page-de-test/148767721808011?v=app_4949752878
And, my code is :
Can someone help me?
Thanks in advance.
Vincent
#89 by Richard - August 20th, 2010 at 03:14
Fixed it, i added this within each image tag:
style="display: block; padding: 0px; margin: 0px"
Hope this helps other people.
#90 by Guru - August 20th, 2010 at 04:51
Hi,
I wonder if someone can help, my customised Facebook page is not rendering correctly in Firefox and Chrome, but works fine in Explorer and Safari. I am getting some weird image overlaps.
can anyone suggest any ideas?
http://www.facebook.com/pages/Guru/334635710636?v=app_4949752878
Thanks.
#91 by Jesse - August 26th, 2010 at 15:25
It might be that your width is 750 and facebook is making the change to force everything to 520.