Keyboard-created emoticons not showing in Facebook since upgrading Firefox 9/12/2014. Will this be fixed? They show in other browsers.
I just upgraded to Firefox v32.0.1 yesterday, and I see that keyboard-created emoticons like smileys (colon +right parenthesis), winks, hearts, etc. are not displaying in Facebook on status messages or comments. This isn't just for new posts, but for old posts as well. They were visible before the upgrade, and now they are not. I believe this is a Firefox/Mozilla issue, not a Facebook one, as I just checked Facebook on two other browsers (Google Chrome and Internet Explorer), and the emoticons do display. Is this something you can fix soon? Thank you.
All Replies (9)
Some site issues can be caused by corrupt cookies or cache. In order to try to fix these problems, the first step is to clear both cookies and the cache. Note: This will temporarily log you out of all sites you're logged in to. To clear cache and cookies do the following:
- Click the menu button , choose History, and then Clear Recent History....
- Under "Time range to clear", select "Everything".
- Now, click the arrow next to Details to toggle the Details list active.
- From the details list, check Cache and Cookies and uncheck everything else.
- Now click the Clear now button.
Further information can be found in the Clear your cache, history and other personal information in Firefox article.
Did this fix your problems? Please report back to us!
Thank you for the suggestions, the-edmeister. I followed your instructions, then closed Firefox and reopened it, but the problem still isn't fixed. I still can't see any keyboard-created emoticons on Facebook in the new Firefox update v32.0.1. I could see them in the previous version of Firefox. As I mentioned before, the emoticons are visible on FB in 2 other browsers, so the problem doesn't appear to be with Facebook. This leads me to believe there's something in the coding of the new v32.0.1 that prevents the emoticons from displaying in Facebook. Is this something that the Mozilla developers could look into? Meanwhile, I could use another browser just for FB, but I'd rather use Firefox for everything because I do like your browser better. If anyone has any further suggestions for setting changes or anything else I can do on my end, please let me know. Thanks.
It is possible that there is a problem with the font that is used to display the emoticons.
What element does get selected when you right-click the area where such an emoticon should be?
See if you can find the characters if you right-click the area where such an emoticon should be and look around that position in the page code.
You can right-click on a web page and select "Inspect Element" to open the Inspector (Firefox/Tools > Web Developer). You can check the font used for selected text in the Font tab in the right pane of the Inspector.
Here is a screen-grab showing where the emoticon should be in a comment, and the element inspection showing "hidden=true" in the highlighted area on the left side, and "display: none" on the right side under Rules. I also checked Internet Explorer's element inspection, which isn't anything like Firefox's...for the same post, it says "renderEmoticons:1", which I interpret to mean that emoticons are to be displayed (which IE does show in posts). I'm not code-savvy, so I don't know what needs to be done to show "hidden=false" in Firefox's translation of emoticon text....maybe that's the key to the problem with the new version of Firefox. Is this something I can change on my end, or does Mozilla have to do that? The actual font used in Facebook's posts and comments appears to be consistent....meaning the same font is used for the colon and the right parenthesis as is for the alphabet. The colon and parenthesis will show in FB posts if used individually within the alphabetic text, but put them together as an emoticon and Firefox isn't displaying them either as text characters or the emoticon. Does this help?
BTW, in the actual post, the emoticon shows in IE right after the poster's "Thank you!" text, but when I hovered over that area in Firefox it shows the :) slightly below it, as you can see in the photo.
If you hover the display:none; line then you will notice a check box that allows to disable this rule by removing the tick. I'm not sure why it shows this display:none rule. It is possible that a script that is supposed to process these lines isn't running (I see several data-xxx attributes that are usually there to be processed by a script). It is also possible that there is a problem with the cookies or that a different setting is used.
"Clear the Cache":
- Firefox/Tools > Options > Advanced > Network > Cached Web Content: "Clear Now"
"Remove Cookies" from sites causing problems:
- Firefox/Tools > Options > Privacy > "Use custom settings for history" > Cookies: "Show Cookies"
I removed the tick, and it solved the problem partially. I'm seeing keyboard-created emoticons in image format on some Facebook pages (like the News Feed), the emoticon in text-character-only format on other pages (like one I follow), but in neither format on others (like my profile page). Which is weird, because I selected an area on my profile page where there was an element that wouldn't display, and removed the tick. Oh well, it looks like maybe Mozilla is in the process of fixing this...I don't know if I'm the only person who has brought this issue to Mozilla's attention. It might straighten itself out in time. Thanks for your help!
You can override such a CSS rule in Firefox via code in to the userContent.css file.
You would have to check if you need display: inline !important; or display: block !important;
Add code to the userContent.css file.
@-moz-document domain(facebook.com) { .emoticon_text { display: inline !important; } }
The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.
You can use this button to go to the currently used Firefox profile folder:
- Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)
- Create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
- Use a plain text editor like Notepad to create a (new) userContent.css file in the chrome folder (file name is case sensitive)
- Paste the code in the userContent.css file in the editor window
- Make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userContent.css.
Otherwise Windows may add a hidden .txt file extension and you end up with a not working userContent.css.txt file
OK, I did exactly what you said, created and saved the userContent.css as instructed. Sometimes the emoticons display as images or letters in the places where they didn't, and sometimes they don't. I went into the element inspector on the Facebook pages I had trouble with and found that where I had unticked the areas you told me to, they reappeared as ticked. The "display: none" area even allowed for a change from "none" to "inline !important" and the emoticons worked...until I went to another page and came back...then it reverted to "none" with the box ticked and no emoticons appeared where they should have. It seems one problem may be that the element inspector won't let you save your changes. I looked on the inspector for something that would allow saving changes, but I couldn't find it. How can I get the changes to save in Firefox's element inspector? There are a ton of things to look through in "about:config" where preferences can be changed....is that where I need to change a setting to get the element inspector to allow changes to be saved? Thanks again.