Forum:

CSS was ignored due to mime type mismatch

Greenhorn

Posts: 17

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Dear colleagues,

I’m seeking help to try to solve a problem that is desperating me!!!

I have a JSP where I include the following CSS and JavaScript files like this:

It seems that everything must be OK, but the JSP appears on the navigator, I realize that the CSS and JavaScript files are ignored…

In the IE Web Console I get the error message “"CSS was ignored due to mime type mismatch" …

I can’t understand the reason of this message. As you can see, I state rel="stylesheet" type="text/css" .

It must be something very stupid, but so far I was not able to find the root of this error.

Hope someone could give me a helping hand…

Thank you very much in advance for your attention.

Kind regards.

Jeanne Boyarsky

author & internet detective

Posts: 41878

909

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Could your server be sending back a http header with each of the requests? Maybe it defaults to a specific MIME type?

[OCP 17 book] | [OCP 11 book] | [OCA 8 book] [OCP 8 book] [Practice tests book] [Blog] [JavaRanch FAQ] [How To Ask Questions] [Book Promos]
Other Certs: SCEA Part 1, Part 2 & 3, Core Spring 3, TOGAF part 1 and part 2

Java 8 (verified skill)
Skill verified by Jeanne Boyarsky

JUnit 5 (verified skill)
Skill verified by Jeanne Boyarsky

Likos Anthropous

Greenhorn

Posts: 17

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Jeanne Boyarsky wrote:Could your server be sending back a http header with each of the requests? Maybe it defaults to a specific MIME type?

Dear Jeanne,

Thank you very much for your quick response. I'm using Apache Tomcat 7.0.34.0 and I did not have this situation in any of my previous experiences.

Sorry but, as I'm not very much experienced yet in Web Programming, I don't know how to check the header sent back by the server :(...

Thanks again.

Regards.

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

IE is notorious for misleading messages. I'd open the page in Chrome and use its network tools.

Also, I'd advise against using page-relative URLs to refer to the resources. See the JspFaq for more info.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Likos Anthropous

Greenhorn

Posts: 17

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:IE is notorious for misleading messages. I'd open the page in Chrome and use its network tools.

Also, I'd advise against using page-relative URLs to refer to the resources. See the JspFaq for more info.

Thanks Bear,

I changed the resources path using ${pageContext.request.contextPath}, now remains like this:

<head>
        <title>Shambala</title>
        <link rel="stylesheet"    type="text/css"  href="${pageContext.request.contextPath}/Estilos/style.css"         media="all">
        <link rel="stylesheet"    type="text/css"  href="${pageContext.request.contextPath}/Estilos/lksMenuSkin3.css"  media="all">
        <link rel="stylesheet"    type="text/css"  href="${pageContext.request.contextPath}/Estilos/styleCSS3Menu.css" media="all">
        <link rel="stylesheet"    type="text/css"  href="${pageContext.request.contextPath}/Estilos/validacion.css"    media="all">
        <link rel="shortcut icon" type="image/png" href="${pageContext.request.contextPath}/images/Shambala.ico">
        <script type="text/javascript" src="${pageContext.request.contextPath}/JS/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/JS/jquery.lksMenu.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/JS/vanadium.js"></script>

</head>

But now the messages I get in the Google Chrome Console are the following:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8084/Shambala/Estilos/lksMenuSkin3.css". localhost/:16
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8084/Shambala/Estilos/styleCSS3Menu.css". localhost/:17
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8084/Shambala/Estilos/validacion.css". localhost/:18
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8084/Shambala/JS/jquery-1.4.2.min.js". localhost/:20
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8084/Shambala/JS/jquery.lksMenu.js". localhost/:20
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8084/Shambala/Estilos/style.css".

I think we'e getting closer...

Thanks.

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

What is serving these resources?

[Asking smart questions] [About Bear] [Books by Bear]

Likos Anthropous

Greenhorn

Posts: 17

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:What is serving these resources?

I'm using Apache Tomcat 7.0.34.0. The JSP page is loaded from a servlet through the following code:

Hope it helps.

Thanks.

Paul Clapham

Marshal

Posts: 28226

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Do you perhaps have a filter which specifies "text/html" as the MIME type, and which is being applied to your CSS and JS files?

Java 8 (verified skill)
Skill verified by Paul Clapham

Likos Anthropous

Greenhorn

Posts: 17

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Paul Clapham wrote:Do you perhaps have a filter which specifies "text/html" as the MIME type, and which is being applied to your CSS and JS files?

Thanks for your answer Paul.

I do have a filter but I belive has nothing to do with the MIME type. Anyway I post the code below, just in case you note something odd...

package controlador;

import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class Filtro implements Filter {
    
    private ServletContext application;
    private String controlador = null;
    private String controladorAdmin = null;
    
    /** 
     *
     *  @param filterConfig: FilterConfig
     */
    @Override
     public void init(FilterConfig filterConfig) {
        
        application = filterConfig.getServletContext();
        controlador = filterConfig.getInitParameter("controlador");
        controladorAdmin = filterConfig.getInitParameter("controladorAdmin");
    }
   
    /**
     *  @param request: HttpServletRequest
     *  @param response: HttpServletResponse
     *  @param chain: FilterChain
     *
     *  @exception ServletException 
     *  @exception IOException 
     */
    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
        FilterChain chain) throws IOException, ServletException {
        
       for (Enumeration en = request.getParameterNames(); en.hasMoreElements(); ) {
             String name = (String)en.nextElement();
             String value = request.getParameter(name);
             request.setAttribute(name, value.trim());
        }

HttpServletRequest httpRequest = (HttpServletRequest)request;
        String URI = httpRequest.getRequestURI();

if (URI.endsWith(".gif") || URI.endsWith(".jpg")) {
            chain.doFilter(request, response); 
        } else {
            if (URI.lastIndexOf("/admin/") > 0) {
                RequestDispatcher rd = application.getRequestDispatcher(controladorAdmin);
                rd.forward(request, response);
            } else { 
                request.setAttribute("op", getOperation(URI));
                RequestDispatcher rd = application.getRequestDispatcher(controlador);
                rd.forward(request, response);
            } 
        }
    }
    
        @Override
    public void destroy() {
    }
    
     /**
     *  @param fullURL
     */
    private String getOperation(String fullURL) {
        String op = null;
        int lastPathSeparator = fullURL.lastIndexOf("/") + 1;
        if (lastPathSeparator != -1)
            op = fullURL.substring(lastPathSeparator, fullURL.length());
        return op;
    }
}

Paul Clapham

Marshal

Posts: 28226

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I don't see any special handling for ".css" so I suppose if the filter does handle those files, it would forward to your "controlador" parameter. Perhaps that applies the MIME type?

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Why is your filter even mapped for any static resource? You shouldn't even have images, scripts or stylesheets going through the filter.

[Asking smart questions] [About Bear] [Books by Bear]

Likos Anthropous

Greenhorn

Posts: 17

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:Why is your filter even mapped for any static resource? You shouldn't even have images, scripts or stylesheets going through the filter.

Well, this is some kind of "inherited code"..., but now it seems that I found where the mistake was...

As you can see there is an if sentence that checks the file extension and in case of .gif and .jpg, it allows the file to go through... I also included here .css and .js files and now these resources are loaded...

Is that what you meant by mapping static resources?

I don't know if this is the best way to proceed, maybe not, but at least the problem is solved...

Thank you Jeanne, Paul & Bear for all our support.

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I mean that the filter should be mapped in the deployment descriptor such that it never even gets called for resources that it doesn't care about. Checking for images and such in the filter is, as you have discovered, fragile and a poor way to go about it.

[Asking smart questions] [About Bear] [Books by Bear]

Paul Clapham

Marshal

Posts: 28226

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have to admit, the last time I wrote a web application I had code just like that in my filter. (Which is probably why I could point out the problem here.) That's because I couldn't figure out how to configure the filter to be triggered for "everything except" a certain list of patterns. I'm sure I wouldn't be hijacking the thread if I asked for an example of how to do that.

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Admittedly it's a lot easier when using a Front Controller as there's just one url pattern to worry about. This is what I always do. Otherwise, you need to map a bunch of stuff and the deployment descriptor is kinda messy.

[Asking smart questions] [About Bear] [Books by Bear]

Consider Paul's rocket mass heater.