Same HTML source files but display differently

Question

I'm new to bootstrap. I want to use the bootstrap on my previous project. But once I included the bootstrap.min.css it failed, while it can work fine if I create a new html from scratch.

I've uploaded the sample files in GitHub: https://github.com/kid551/toolbox/tree/master/bootstrapSameFiles . You can check that the test.htm and test2.htm are the same files but they will display differently like this:

test.htm:

=============================

=============================

test2.htm:

=============================

=============================

I think you can rebuild this issue by directly downloading from GitHub.

I don't know why it happens and how I fixed this.

Thanks.

Answer 1

You're running into some encoding issues. Even though your code base seems to be the same - it isn't. Let me show you visually.

The moment I switch from UTF-8 to UTF-16 BE, your working versions (test.htm) code gets cryptic, while the other one seems to be pretty well working.

test.htm (UTF-16 BE)

test2.htm (UTF-16 BE)

So eventually you might have copied your code from somewhere else or even used a wrong encoding.

EDIT

You can test that with any editor which is able to show you some code. Just try to delete a linebreak by hitting backspace at the first index of a row. You'll notice on almost every row that you're not deleting the linebreak but an 'invisible character' instead. So that again means, you're just not able to see those charecters your editor is not able to encode properly.

Answer 2

I have downloaded your source from the GIT. You are right both are similar but there is something wrong with the test2.htm file. I have NetBeans installed on my local. When I open test2 file its showing source as empty in NetBeans.But if I open the same file using notepad++ it's showing the source. So maybe file is corrupted. What I suggest is try to create the new file or use NetBeans. After saving using NetBeans its displaying same as test.html