The MIME type text/html was ignored along with the AddType directive

Encountering an issue where attempting to load a CSS file from a folder results in the console error: "Resource interpreted as Stylesheet but transferred with MIME type text/html". Attempts to resolve this by adding an .htaccess file (in the root/same folder as css) with "AddType text/css .css" have been completely ignored.

Any suggestions on how to fix this?

(Note: running Windows 8.1 and WAMP)

Appreciating any advice or feedback.

Answer №1

Give this a try:

<FilesMatch "(\.css)$">
    AddType text/css .css
    Header set Content-Type text/css
</FilesMatch>

However, ideally you wouldn't need to do this. Using text/html is the standard practice.

Answer №2

Due to a security vulnerability, it is not sufficient to simply set the style sheet "rel" tag type property to text/css. You must also specify the content type in the http headers (content-type:text/css). Based on your usage of Apache, if someone else encounters this issue in IIS and comes across this page, they can resolve it by navigating to control panel -> programs and features -> turn windows features on or off -> internet information services -> world wide web services -> common HTTP features -> static content, then enabling this option and restarting IIS.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the technique for determining the scale percentage of an image with the background-size property set to cover?

I am trying to determine the scale of an image after it has been resized. By using background-size: cover on the body background image, I want to ensure that the image maintains its aspect ratio and expands or shrinks to fit both the width and height of t ...

The appearance of CSS can vary depending on the screen resolutions in which it is

I am encountering an issue with my HTML component that utilizes a booking engine. The parent width of the component is set, and the children elements inherit this width. There are three input fields and a search button within the component. The problem ari ...

I am facing an issue with accessing the Controller in Laravel

I am having an issue with the storeClientRequest function not being triggered. When I try to submit, the page displays a 404 Not found error message. Here is my form: <form class="needs-validation" novalidate method="POST" action=&q ...

The CSS navigation bar is not properly aligned in the center

This menu was constructed by me: JSBIN EDIT ; JSBIN DEMO Upon closer inspection, it appears that the menu is not centered in the middle of the bar; rather, it is centered higher up. My goal is to have it positioned lower, right in the middle. I ...

Is there a way to achieve a full-page inset shadow using absolute positioned elements?

Currently, I am facing a challenge with a page that has an inset box shadow on the body element. When there are absolute and relative positioned divs on the page that expand enough to generate a scrollbar, the box shadow is cut off even when the height is ...

Obtain pictures from MongoDB for a website using Angular6

I'm currently in the process of developing my website and I want to showcase an image from my database on the header. Each customer is assigned a unique logo based on their ID, but I'm unsure how to use Angular to display it. Below is my code s ...

What strategies can I use to ensure that the navigation bar is responsive when viewed on a

Check out my CSS file here for the navigation styling. See the screenshot of my HTML file showcasing the navigation panel here. I'm seeking assistance in making my navigation responsive on all mobile devices, as it is currently not functioning prope ...

Displaying a large image within a small div using Bootstrap 4

I have a specific image with dimensions of 244px by 751px, and I am trying to place it inside a div container that is 132px by 132px. I want the image to maintain its aspect ratio without being stretched. Despite using the img-fluid class, the image does n ...

Convert XML data into a structured table format

We have an XML file named "servers.xml" that needs to be parsed. This file is located on the same server where we want it to be parsed, in the same folder. <root> <list> <server> <server name="28 Disconnects La ...

Error message in JS/Ajax alert box

I keep receiving an alert box saying "Image uploaded" even when the variable $imagename is empty. Below is the script in question: <script> function ajax_post1(ca){ var cat = ca; var name = document.getElementById("name").value; var ...

How can I ensure a header is displayed on each page by utilizing CSS or JavaScript/jQuery?

On a lengthy page with approximately 15 pages of text, I would like to insert a header at the beginning of each page when the document is printed by the user. Can this functionality be achieved using CSS or JavaScript/jQuery? ...

Maintain the SEO-friendly URL, but fetch the database id instead

I'm struggling with using .htaccess and SEO URL (also known as URL rewrite). For example, I have a database of categories with names like: id name 1 category template 2 category-template 3 category template 4 category-template I have s ...

I am encountering the error message "The requested resource does not contain the Access-Control-Allow-Origin header."

After going through all the possible answers and attempting to add header("Access-Control-Allow-Origin : *"); to the beginning of my asp page, I still couldn't resolve the issue. jQuery(document).ready(function(){ $.post('htt ...

form controls disappear upon adding form tags

Currently experiencing an issue with angular and forms that I could use some help with. I have a dynamic form that is functioning properly, but now I need to add validations to it. After following this guide, I established the structure correctly. Howeve ...

What is the reason for being unable to submit the value of an input that is disabled?

When I try to save the value of an input field that is disabled and has the required attribute, I receive an error message stating that "field_name is required". Why am I unable to insert a value when the input field is disabled? <input disabled type=&q ...

Alerting Users Before Navigating Away from an Angular Page

I am looking to implement a feature in my app that will display a warning message when attempting to close the tab, exit the page, or reload it. However, I am facing an issue where the warning message is displayed but the page still exits before I can resp ...

Vuetify 3 now displays full text in v-autocomplete without an ellipsis

Trying to truncate long text in a v-autocomplete component using Vuetify 3 and text-overflow: ellipsis, but it's not working. Check out the code below: <div id="app"> <v-app id="inspire"> <v-row align="cen ...

Acquiring a hyperlink using a regular expression from the <a href> tag

Currently utilizing JMeter and in need of extracting a link from the <a href> tag below: <a href="/i/info/14259.html" class="ogrLink">Department page</a> The desired regular expression for obtaining this link is: /i/info/14259.html An ...

Is it time to go back to the parent selector using the ampersand symbol?

I recently started using Less for writing CSS, and it has definitely been a time-saver for me. However, I have encountered a small issue with my code: <a href="#" class="btn-black-bg btn-right-skew">largest fight gym in Australia</a> Less .b ...

Encountering issue when deploying multiple HTML files using Parcel

Whenever I deploy a website with multiple entry points and many HTML files, and the host uses the build command: parcel build index.html aboutme.html, the deployed website gives me a 404 error. However, if I manually enter /aboutme.html or /index.html in t ...