CODEWITHSUNDEEP
cssfacebook
input
input

Reputation: 7519

css3 in facebook app

this doesn't work in a facebook application?

q:before { content: '\00AB';   color: #FF0000; }
q:after { content: '\00BB';  color: #FF0000; }

Upvotes: 0

Views: 1150

Answers (2)

zombat
zombat

Reputation: 94217

If you are building an FBML application, then yes, your CSS will be filtered through Facebook's content rendering servers. They do this with all FBML pages and referenced resources in order to prefix all your HTML/CSS/JS elements with a "namespace" created using your application id. This ensures that your CSS can't mess with the primary Facebook layouts.

Unfortunately, their CSS filters seem to disallow some CSS. For example, I have found that all the Firefox specific CSS rules such as -moz-border-radius: 3px work fine, but the corresponding -webkit-border-radius: 3px does not work. Very annoying.

My suggestion is to find the rewritten CSS file and see what they've done with it. You'll have to view source on your FBML page and look for the CSS files, they generally come from http://external.ak.fbcdn.net/fbml_static_get.php, with a query string that will look like the actual source. Check out your CSS file and you'll see how it's been re-written... I believe I've used the content: rule before, so perhaps it's being sanitized in some way.

Upvotes: 2

Syntax Error
Syntax Error

Reputation: 4527

If it's showing question marks instead of the quotes then that usually means you have an encoding issue. The hex-content I mentioned is the '\00AB' part. That's the hex equivalent of an angled quotation mark, otherwise known as « or « ...it shows a «

Try this:

q:before { content: 'test';   color: #FF0000; }

To verify that normal text content is working ok - it should insert the word "test".

I played with this a little and I seemed to have trouble with the font I was using, when I switched to arial it suddenly started working, so you could try that. If it works you don't need to change the font for everything, just q:before and q:after

Upvotes: 0

Related Questions