0

Folder-Tree:

example.com/css/style.css
example.com/index.html

HTML Head:

<!DOCTYPE html>
<html lang="de-DE">
<head>  
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./css/style.css">

If I click "View Page Source" I can click on the css link and I see my file.

I can even type in the adress bar the url "example.com/css/style.css" and I see my file.

I open Firefox Developer Inspect and it gives a Success 200 Code for loading the css-file.

I delete the browser-cache, no change.

I download the html-file and put it into a folder with the css-file. Open it with Visual Studio Code Live Server and it looks right, the css is loading. The same code.

Why does it not work online?

EDIT:

I just saw that in the Firefox Inspector, the html head is greyed out. Both online and offline but offline seems no problem.

4
  • When you see the style.css file in your browser, is it actually up-to-date as well? In some browsers the style.css is cached, and you have to view the css, hit F5 to refresh and then your website will show the changes too. If that's not the case, you have a typo in your CSS near where things aren't working, or conflicting changes. Firefox has a great debugger when it comes to CSS. It will tell you why something is not applied.
    – LPChip
    Apr 28, 2021 at 10:24
  • Just checked again, it is the current version. I am wondering since the css has to be correct because the same file works offline. However, I just saw in the Firefox Inspector that the head is greyed out, very weird. Apr 28, 2021 at 10:38
  • Ok, seems like the online-version has some sort of problem. Just the online-version states in the inspector that "css was not loaded because its mime type text/html'' is not text/css". But both files are the same. Apr 28, 2021 at 10:48
  • Good old Firefox to the rescue. Great for troubleshooting CSS issues. :)
    – LPChip
    Apr 28, 2021 at 11:13

2 Answers 2

2

LPChip suggested me to use the debugger/inspector of Firefox and there, the head is greyed out. On further investigation, I noticed it said "css was not loaded because its mime type "text/html" is not "text/css"

That made me check something...

I got the solution:

I had an apache mod_rewrite activated. While the path was correct, it seems that this mod_rewrite or the dedicated php for the redirection somehow told the browser that the file was html not css.

1
  • I've edited the answer and added some bits of the comments in there that lead to the answer. Now, others don't have to read all the comments anymore to see the thought process that was involved. :) Also, +1
    – LPChip
    Apr 28, 2021 at 11:17
0

I had a similar issue. Was setting up a NGINX from scratch and all the styles for my project were not applied. But they existed and I did not had any other error.

I found out that I had to apply the correct mime types to all files served by NGINX. Before the fix it was text/plain and this did not worked.

I fixed it by adding those lines to NGINX configuration:

http {
  # other config before ...
  include /etc/nginx/mime.types;
  default_type application/octet-stream;
  # rest of config ...
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .