0

I'm working on an activity and came across with this problem. The css won't work in my jsp.

Here is the structure of my project:

enter image description here

I tried applying css on my index.jsp Here:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="../css/wpstyles.css" rel="stylesheet" type="text/css"/>
        <title>Welcome!</title>
    </head>

    <body>
        <a href="login">Login Here</a>  
    </body>
</html>

and in my wpstyles.css is just this:

body{
    background: #6699ff;
    color: #ff3366;
}

But for some reason it won't work. I also tried using the solution provided here: JSP doesn't see css

I also tried using the :

<link href="${pageContext.request.contextPath}/../css/wpstyles.css" rel="stylesheet" type="text/css"/>

or 

<link href="${pageContext.request.contextPath}/css/wpstyles.css" rel="stylesheet" type="text/css"/>

but still doesn't work.

Please help. Thank you.

Here is the rendered index.jsp using the <link href="${pageContext.request.contextPath}/css/wpstyles.css" rel="stylesheet" type="text/css"/>: enter image description here

and here is the rendered index.jsp using the <link href="../css/wpstyles.css" rel="stylesheet" type="text/css"/>:

enter image description here

Mel Daque
  • 69
  • 2
  • 12
  • Please post the **rendered** HTML for each of your JSP examples, as well as the actual request path. What does your browser's F12 tools Network window say about the CSS request? – Dai Aug 24 '17 at 00:35
  • Hi Dai, I added the rendered HTML and the F12 tools. – Mel Daque Aug 24 '17 at 00:45

1 Answers1

0

Quick note: your code isn't valid HTML 4.01. See https://validator.w3.org/. The <link> tag does not get closed in HTML 4.01 (though it would in XHTML). Note, also, that this appears to be different between your first and second screenshots.

Check out the error at the bottom of your first screenshot: your CSS is being served up with an HTML MIME type. See Resource interpreted as Stylesheet but transferred with MIME type text/html error in console for someone else hitting this error. But this sounds like it might be your problem. (It's also possible that your 404 page is HTML - I'd make sure your getting an HTTP 200.)

Basically, to debug, I'd grab the URL in the <link> tag, and try navigating to it. If it starts with "/", then go to http://localhost:8080/[link]. If it doesn't, try http://localhost:8080/Spring_App/[link].

EvanM
  • 667
  • 1
  • 4
  • 12
  • I tried the solution in the [Resource interpreted as Stylesheet but transferred with MIME type text/html error in console](https://stackoverflow.com/questions/25798765/resource-interpreted-as-stylesheet-but-transferred-with-mime-type-text-html-erro) and works now I just need to redirect the index. Thank you – Mel Daque Aug 24 '17 at 01:43