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

After trying a lot of things. I find two free editors that show the error:
- TextWrangler: If I go to view > text display > show invisibles it shows a red ​¿ that is easy to delete.
- Aptana Studio: shows a red cross in the border and a point in the place with the white space.

I still don't know how or why this white spaces appear. For me was an important problem because it can collapse a project and there is no way to see it in my current editor Dreamweaver, no matter wich version I try. This white space cannot be detected either in collaborative tools like JsFiddle, Jsbin, CodePen or Dabblet.

As I said TextWrangler and Aptana are a easy to use and free way to solve it. If anyone can tell another editor or easy way to see it for non experts like me, it would be good to know.

Answer 2

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.