Hidden characters in CSS

Question

I have been hours with a code that did not work and I could not find the problem. I simplified the problem to find it. At the end I find a hidden character, a character I could not see but makes everything goes wrong.

I'm really surprised; I publish it if it could help someone.

This hidden character is just after the blue css and makes everything behind invisible. If anyone deletes that space, the red becomes visible!

I publish this in three places. You can see this surprising problem:

http://codepen.io/anon/pen/riKkn
http://dabblet.com/gist/3135074
http://jsbin.com/exokub/edit#html,live

For me this is really shocking. I've been so many hours to find this. Does anyone know why this happens? Is there anyway to make visible these hidden characters that destroy everything?

CSS:

#blue {position: absolute;width: 200px; height:100px;top: 50px;left: 150px; background-color: blue;}​

#red {position: absolute; width: 200px; height:100px;top: 200px;left: 150px; background-color:red;}​

HTML:

<div id="blue"></div>
<div id="red"></div>

Answer 1

The character is a UTF-8 zero-width space: e2 80 8b. When the CSS parser reaches this character, it stops reading the file.

The solution is just to not put these in in the first place. They aren't valid as part of CSS. If you have existing ones you need to remove, you can open the file with a hex editor to identify their positions.