in web server development on September 17, 2014

Recently I had some issues with CSS files throwing up weird symbols when I updated the said files. Turns out there was a quick and easy solution.

You’ve seen them before; Non UTF-8 characters being displayed on your lovely UTF-8 web page, resulting in these little buggers popping up: ����

Recently I noticed this few low-key side projects. When I updated the CSS files, I was having a whole bunch of these hair pullers appearing for no reason. I thought my first problem was due to the pre-processor I was using (PrePos). However, switching back to CodeKit didn’t help and neither did using the online SASS processor. Eventually, I figured out the issue was due to the Nginx sever configuration file.

I discovered the solution when the CSS file I was applying changes to, was partially showing code from an old version of the said file. This old code was followed by the infamous diamonds and finally, by the latest CSS code changes. Safe to say my mind was blown by this. However, it did help me figure out that the issue wasn’t with the CSS file, but rather the Nginx system as was easy to fix:

Inside the file /etc/nginx/nginx/conf I had the setting sendfile set to on;. Changing this to off; fixed the issue for me, after restart the Nginx service of course.

So if you’re running a Nginx server and your CSS files are being riddled by the infamous � black-diamond-question-mark symbols, try turning off the ‘sendfile’ setting in your Nginx conf. It may help you from ripping your hair out of your head trying to find the cause of the triangles.


Callum works as a Web and Social Media

Callum Hopkins

Callum works as a Web and Social Media "Genius" at Altablue, a Wood Group company. He is based in the North East of Scotland. He has knowledge in Web Design & Development and is a published author. Callum is an avid Football Fan.