A "space" bug? Wha..? 🤨

Question

Can anyone tell me anything about this? I was trying to help James McLain out to figure out why his simple test code was not working.

After staring at it for a good while and then writing my own code lines, which looked identical to his, I still did not see anything wrong. They matched character for character. My line worked, his line did not... yet they were identical except for using a different div ID. I switched the div IDs and yet still my line worked but his line did not.

After that I started playing with his line, erasing parts of it and retyping them and then suddenly it worked. After a bit more trial and error, I found out what it was: a... space 🤨.

For some reason it does not like the space between "image: linear" in the CSS. If you erase that space, and then put it back again... It works fine.

Here is a saved copy of his code to see for yourselves. I replaced "peach" with "red" as CSS doesn't seem to like "peach":

https://code.sololearn.com/WR8W0U33azs1/?ref=app

Answer 1

What looks like a space is an invisible character. This can happen when you copy code from your ide or a text editor into the codeplayground.

Answer 2

Schilling Attila The other white space characters such as tab, space, line break, and/or carriage return aren't actually related to this problem.

The use of white space for readable formatting also is unrelated to this issue and certainly won't cause a stack error in CSS.

The bonus about "editors not saving you from messing up the basics" and the explanation was entirely unclear and seemed to be convoluting different scenarios and different types of issues altogether. I struggled following your points.

I'm only pointing this out so others who read this aren't confused by any of the possible interpretations from your answer.

Answer 3

Here you see an example with the error message:
https://code.sololearn.com/cfj27oJABRuo/?ref=app

Edit: Normally you get only compilation error. So it is a bit tricky to find the bug.

Answer 4

Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 Not really. Maybe some ide's shows you this character or the line.
If I'm right it has to do with utf-8 encoding.

Here is another thread. One member found the lines:
https://www.sololearn.com/discuss/1731911/?ref=app

Answer 5

Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘
About viewing invisible characters, you can if your code editor comes with multiple encoding support, just switch the encoding to ANSI or ASCII (some editors treat these similarly). By then those invisible characters will show up 👍

Answer 6

Denise Roßberg 1Lory☕ So I just opened up Sololearn on a PC for the first time and to my surprise in the playground, it showed the "invisible character" on my copy of James McLain 's code...It came up as a red box with a dot or dash in it 🤨

BTW Sololearn really needs to update their desktop version. It is really lacking compared to the app 😣

Answer 7

Denise Roßberg Thanks for the link 👍

So it's not an unknown issue then 🤔

Answer 8

Use code editor or html formater. Com

Answer 9

Denise Roßberg Hmm interesting 🤔 Is there anyway, that you know of, to see this "invisible character" or to tell what it is coming up as?

This took enough time as it was trying to find it on a few lines of code, I imagine it could be quite the challenge to find an "invisible character" on a transferred code with many lines if it caused the entire thing not to run 😥

Answer 10

James McLain Was your orginal code typed up here on Sololearn or did you transfer it in?

Answer 11

It's Cuse of the reason In css u can use tab to get some space...or space but not both especially not in the same line plus line breaks are important to being organised properly if u do not folow these basics regardless ur content it will stack error.
Additional bonus whatever editor u use it won't save u from mess up the basics.The explaination is that when the code run through the framework of its for u looks one space left but made different buttons or method with then it's a differ character in the background there is difference beetwin space and space...😀