The CSS file was not applied because the mime type did not match (Error code: SEC711

Question

The CSS file was not applied because the mime type did not match (Error code: SEC711

I am currently working on a JSP-Servlet application. I have successfully deployed the application using Eclipse with the default Tomcat 7 server.

However, upon deployment, I noticed that the UI renders properly in Chrome and Firefox but encounters issues in IE10 or later. The console displays a warning stating:

SEC7113: CSS was ignored due to mime type mismatch

This is how the CSS files are referenced in the application:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="shortcut icon" href="images/rpt.ico" type="image/x-icon">
        <link href="css/custom.css" rel="stylesheet" type="text/css" />
    </head>
...............
</html>

I am seeking advice on how to resolve this issue. Interestingly, when running the site in Compatible mode, it renders fine. However, I want to find a solution that works even without Compatibility Mode enabled.

One observation is that the Type is not being detected as text/css. But why is this happening?

html css internet-explorer tomcat mime-types

Answer 1

Answer №1

Alright,

After realizing that I couldn't achieve what I needed from the server side [tomcat] and even after trying with web.xml, I finally discovered a solution using a Filter Implementation.

   @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        if(request.getHeader("accept")!=null && request.getHeader("accept").contains("css")){
            response.setHeader("Content-Type", "text/css");
        }
        chain.doFilter(req, response);
    }

I made sure to explicitly specify text/css for css requests. And voila, it started working like a charm.

Answer 2

Alright,

After realizing that I couldn't achieve what I needed from the server side [tomcat] and even after trying with web.xml, I finally discovered a solution using a Filter Implementation.

   @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        if(request.getHeader("accept")!=null && request.getHeader("accept").contains("css")){
            response.setHeader("Content-Type", "text/css");
        }
        chain.doFilter(req, response);
    }

I made sure to explicitly specify text/css for css requests. And voila, it started working like a charm.

The CSS file was not applied because the mime type did not match (Error code: SEC711

Answer №1

Similar questions

Tips for sending an HTML form through Ajax, storing the data in a file, and then showcasing the results in a div

What is the proper way to retrieve this stylesheet and add it to the header of my HTML file?

Trouble getting CSS and Javascript to bind when dynamically appending HTML elements

Tips for inserting a value into an HTML field using ASP.NET code behind

What steps should I follow to make a sticker adhere to a div?

Different ways to modify the CSS file of the bx-slider plugin for multiple sliders within a single webpage

Obtaining the identifier of the grandparent element that is of the "

Adjust the color of the text depending on the background it is displayed on

Is there a way to make jQuery insert a placeholder before the image fades in?

In JavaScript, it is necessary to determine if a checkbox is checked when modifying an input box

Modify the background of the parent component when hovering in ReactJS

What is the best way to align a submit button and select option in a row within a form using Bootstrap?

Steps to invoke a function repeatedly for an animation

What could be causing my divs to not properly handle overflow with the overflow-y scroll property?

Exploring CSS shaders in a browser?

Uploading multiple files with unique IDs into a table

`The Conundrum of Basic HTML Parsing`

Divider separating each item within the ListBox

Retrieving and storing information from a form without the need to submit it

How to create a dynamic background color animation in jQuery similar to a progress bar animation