No css at the web page

[Subdartha]

Hi Martin,
First of all, thanks a lot for putting this idea to real world! I'm sure this was very, very desired by many people.
I just got a problem displaying the results. The script is running just fine, but the web page seems to lack all the css.
Please see how it looks for me. I tried desktop and mobile browser - the result is the same.
Could you have a look at it please?

[Shubhainder]

Hey I can help with the CSS.

[mracko]

Thanks @Shubhainder. If you can have a look at it then perfect. Maybe you can find an issue in the code.

So far, I haven't had anyone with this issue. Could you please check the page source in your browser and tell me what HTML code you have in line 32 (should be between and .

Then you can try replacing line 32 in the head.html (located in the templates folder) with this:

Let me know once you've tried it.

[Subdartha]

Hi,
I checked the page source, the css file linkage at line 32 appears to be all right:
<link rel="stylesheet" rel="stylesheet" href="/static/assets/css/black-dashboard.css"/>
The css file is also present in the right directory, sized 402635 bytes.
However in Dev Tools I can see there are 0 rules processed for black-dashboard.css:

I tried replacing the line 32 in head.html as you said, what you suggested to replace it with - was eaten by the post-processor here xD but I tried putting the static line there:
<link rel="stylesheet" rel="stylesheet" href="./assets/css/black-dashboard.css"/>
It didn't help. I have a feeling somewhere higher the css isn't getting loaded and processed.

[Subdartha]

I narrowed down the problem.
The file static/assets/css/black-dashboard.css is not being interpreted by the browser without a kick. Not sure why yet.
Right after loading:

After modifying the file in the Style Editor (anything, even modifying the comment will do):

I suggest to work in this direction more to find out the reason of misprocessing.

[Subdartha]

After some additional investigation I found the error in the debug Firefox console:
The stylesheet http://localhost:5000/static/assets/css/black-dashboard.css was not loaded because its MIME type, “text/plain”, is not “text/css”.

[Subdartha]

So basically:

• errors are:
  The stylesheet http://localhost:5000/static/assets/css/black-dashboard.css was not loaded because its MIME type, “text/plain”, is not “text/css”.
The stylesheet http://localhost:5000/static/assets/css/nucleo-icons.css was not loaded because its MIME type, “text/plain”, is not “text/css”.
• If you open the files mentioned and re-save them even in simple notepad, the css start to be seen by the browser correctly and the GUI is loading fine. Even with the restarts of the browser.
• Upon restart of the .py script the css is lost again.

Something in the way how you generate the page in python is not setting the proper mime types. Unfortunately I'm not a Python guru so can't say what is wrong with it.

Hope this helps to fix it.

[mracko]

Thanks for the info! I've done some research based on your findings and came to this possible solution:

Please check the following value in your registry (Win + R, then type regedit and hit Enter:

Make sure you have "text/css" as Value Data. Please, let me know if this did the trick.

[Shubhainder]

If this does not work either then there must be a problem with your python code try reviewing it again

[Subdartha]

@mracko, yeah I saw this possible solution and already tried it out. Unfortunately it did not help.

[mracko]

Strange... Let's try one last thing. See if you can run this little Flask WebApp with a Bootstrap CSS - https://github.com/doomspork/flask_example

Download it a run app.py. Then load localhost:5000 in your browser. Let me know if it works with CSS. This is just to confirm that there is in fact something wrong with my code.

[Subdartha]

Hm....
The stylesheet http://localhost:5000/static/stylesheets/app.css was not loaded because its MIME type, “text/plain”, is not “text/css”. when running the flask example.
All other css are loading correctly, e.g. bootstrap.css is loading just fine.

[mracko]

Seems that Flask is having troubles getting local CSS files in general. Try changing the lines 29 to 31 in the head.html file located in the templates folder to this:

<link href="https://github.com/mracko/MSFS-Landing-Inspector/raw/master/static/assets/css/nucleo-icons.css" rel="stylesheet" />
<!-- CSS Files -->
<link href="https://github.com/mracko/MSFS-Landing-Inspector/raw/master/static/assets/css/black-dashboard.css" rel="stylesheet"  />

What I've done is that I've changed the html to load the CSS from this repo instead loading it locally from the static folder. See if it works.

[Subdartha]

It gets a different problem now when fetching CSS remotely:
The resource from “https://raw.githubusercontent.com/mracko/MSFS-Landing-Inspector/master/static/assets/css/black-dashboard.css” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mracko/MSFS-Landing-Inspector/master/static/assets/css/nucleo-icons.css” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff).
Please see this link for help about this error: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options

But ultimately all of this comes down to those css files not being css, but plain text.

[mracko]

I thought we might be able to trick Flask this way. Unfortunately, it didn't work. Since both Flask apps (MSFS Landing Inspector and the Flask Example) couldn't load local CSS files I suspect something is wrong with the way Flask handles CSS files on your PC. I'll do some more research. Maybe I'll find something that will help.

Additionally, I'm planning on releasing a compiled EXE this week. Hopefully, this will fix your issue.

[Subdartha]

Okay sure, I'll be waiting. Thanks!

[Subdartha]

Hi @mracko,
As expected, the executable doesn't fix the issue, the browser reports:

The stylesheet http://localhost:5000/static/assets/css/black-dashboard.css was not loaded because its MIME type, “text/plain”, is not “text/css”.