Problem description:
- External CSS file required by HTML was being downloaded from the server but not being applied to the Web page
- To add to the frustration, if the Web page (which, as mentioned, was rendered without the CSS) was then saved locally from the browser and then that file opened in the browser, it would render just fine
-
Removing the
<!doctype html>from the first line of the HTML file seemed to solve the problem and cause the CSS to apply to the HTML, but I wasn’t prepared to do that since it seemed that this is a symptom of a problem rather than a solution.
After many searches and trials, I looked at the Network tab in Chrome browser and although all the CSS files were being downloaded, their MIME type was text/plain. The reason is that the Web server (in my case nginx) was sending out the wrong MIME type with the css files, and <!doctype html> apparently does not like that which causes the files not to be parsed or applied.
The solution in my case was to add
location ~ .css {
add_header Content-Type text/css;
}
location ~ .js {
add_header Content-Type application/x-javascript;
}
under the server { section, since for some reason
include /usr/local/openresty/nginx/conf/mime.types;
wasn’t doing it’s job.
Saved me and entire day of debugging.
Thanks, man.