mime type error on import css

[larry29936]

The first entry in the css for my webpages is:

 @import "navbar.css";

It works fine on my local apache2 server but when I try to run it on the webhost I get the following error:

The resource from “http://test.example.com/css/navbar.css” was blocked due to MIME type (“text/html”) mismatch

The code in the header of the webpage is:

<link href="css/features.css" rel="stylesheet" /> 

I've never done an import of css before and I'm stumped as to why it works locally but not the webhost. Can someone help me out?

[edited by: not2easy at 2:15 pm (utc) on Jul 11, 2020]
[edit reason] exemplified URL [/edit]

[not2easy]

A css link should include that MIME information:

type="text/css"

If it is html 5, the closing slash is optional. Try something that adds the media information as well: media="screen" or if you want printed copies to have the same appearance as the screen view: media="all"

A 'typical' stylesheet link looks like this:

<link rel="stylesheet" type="text/css" media="screen" href="/style.css">

- also be sure that the link to the stylesheet is accurate. The link shown (..href="css/features.css") assumes that your html page is located within the /css/ folder (on a typical server).

[larry29936]

Just to clarify, I'm getting a vertical menu list instead of a navbar even after correcting the link. If I add a link to the navbar.css instead of trying to import it into the features.css it works fine. I'm doing an import because I use the same navbar.css on multiple pages on the site. Much easier to maintain in one file rather than adding the navbar.css code to the css file for each page. I'm also trying to reduce server calls.

[larry29936]

As I said in my initial post, I don't get any errors running on my local apache2 server.

[not2easy]

The @import part at the top of your .css file looks OK but if the relative path is different from being in the same folder it may not be OK. I understand the idea but haven't used it myself. Maybe you should be using

@import '/css/navbar.css'

If you use tools to check the headers, you could see exactly what the problem is, you could see how the server requests the file. I use FF Developer Toolbar and the Live HTTP headers extension for that.

[larry29936]

Fixed....the problem was that navbar.css was being seen as an html type, not css. Opened it in VS code, saved as css uploaded it to the webhost, no more errors.

[not2easy]

That explains it well, thanks for sharing the solution. I learned about that the hard way myself, though it was so long ago I do not recall what alerted me to it. I quit using the text thing that came with Windows for editing and learned about Notepad++ as a result, so it was worth it.

[tangor]

Notepad was okay, Wordpad was not. Notepad++ solved all that! (text stuff)

Glad the issue was resolved! There's only 9.000,000,0000,001 left to go. :)