CSS file is not loading?

java javascript html css servlets

15,978

Solution 1

Make use of the HTML <base> tag. It denotes the base URL of all relative URL's used in the final HTML output. If you set it with HttpServletRequest#getContextPath(), then ALL links in your page will be relative to the http://example.com/contextname URL, which is http://localhost:8080/Projectname in your case.

<!doctype html>
<html lang="en">
    <head>
        <base href="${pageContext.request.contextPath}">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <ul>
            <li><a href="html/page.html">HTML page</a></li>
            <li><a href="jsp/page.jsp">JSP page</a></li>
        </ul>
    </body>
</html>

Note that you should not start the relative URL's with /, otherwise they will lead to the domain root, e.g. http://example.com/yourlink.

By the way, links doesn't need to be placed inside a form. Also HTML tables ought to be used for tabular data only, not for other content. Learn semantic HTML as well.

Solution 2

Use <c:url> to resolve absolute URIs (this example assumes that ".." in your code is a webapp root):

<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<HTML> 
 <head> 
 <link rel="stylesheet" type="text/css" href="<c:url value = "/CSS/home.css" />" /> 
 <link rel="stylesheet" type="text/css" href="<c:url value = "/CSS/left.css" />" /> 
 <script type="text/javascript" src="<c:url value = "/js/friend_request.js"></script>  

 </head> 
 <body> 
 <div class="menu"> 
 <form name="search_form" method="post"> 
<table id="menutabel" class="color"> 
  <tr> 
   <td class="alt"><A class="one"HREF="<c:url value = "/home.jsp" />">Home</A></td> 
   <td class="alt" ><A class="one"HREF="<c:url value = "/HTML/falbum.html" />">My Album</A></td> 
   <td class="alt" ><A class="one"HREF="<c:url value = "/HTML/MyDiary.html" />">My Diary</A></td> 
   <td class="alt" ><A class="one"HREF="<c:url value = "/HTML/MyFriends.html" />">Myfriends</A></td> 
      </tr> 
    </table> 
 </form> 
 </body> 
 </html>

Solution 3

These files are loaded from the client which will interpret relative links to the base URL. If you are internally forwarding a request to a different servlet, you have to pay attention to what the client thinks is the URL. It may be necessary to switch to absolute links or generate a base tag.

These types of problems are easily seen client-side debugging with Firebug or Safari for example. You're probably getting 404s on the css and javascript links.

Solution 4

When external files like css and js not getting loaded then use the absolute path. Example:

<%=request.getRealPath("/")%>

View more solutions

15,978

Author by

Hariharbalaji

Updated on June 04, 2022

Comments

Hariharbalaji almost 2 years
I am having a JSP file with the below codes
```
 <HTML>
 <head>
 <link rel="stylesheet" type="text/css" href="../CSS/home.css" />
 <link rel="stylesheet" type="text/css" href="../CSS/left.css" />
 <script type="text/javascript" src="../js/friend_request.js"></script> 

 </head>
 <body>
 <div class="menu">
 <form name="search_form" method="post">
<table id="menutabel" class="color">
  <tr>
   <td class="alt"><A class="one"HREF="home.jsp">Home</A></td>
   <td class="alt" ><A class="one"HREF="../HTML/falbum.html">My Album</A></td>
   <td class="alt" ><A class="one"HREF="../HTML/MyDiary.html">My Diary</A></td>
   <td class="alt" ><A class="one"HREF="../HTML/MyFriends.html">Myfriends</A></td>
      </tr>
    </table>
 </form>
 </body>
 </html>
```
When i run this JSP file individually on the server both the CSS file and the Java script file are loading correctly ,but the problem is when i forward the request from a servlelt both the CSS and the Java Script file is not loading. Can anyone help me out with this problem?

I am having all the html, jsp, CSS, java script into separate folders.

Like

Web-content
|

|-- HTML (This folder will have all the HTML files)

|--- CSS (This folder will have CSS files)
|--- js
|--- JSP
- brabster over 14 years
  
  What is the URL you use to access your servlet?
- Hariharbalaji over 14 years
  
  i am using <localhost:8080/"Projectname"/"Servletname"> to access the servlet, can i know why you are asking this?
Stephen C over 14 years

That depends on what webserver you are running.
Bozho over 14 years

(+1) <c:url is the way to do it
Bozho over 14 years

(+1) didn't know that tag existed.. :)
BalusC over 14 years

All those c:url's in the JSP is a bit messy. But another major advantage of c:url is that it automatically does the "URL rewriting" for the case the session plays a role in the whole story and the client has cookies disabled. If this is the case, I would go for it as well.
Hariharbalaji over 14 years

i am using apache tomcat, i have configured tomcat with eclipse, and the log folder in the apache tomcat folder is empty. So where can i find that
Hariharbalaji over 14 years

thank for the tip, i was just trying to create a navigation bar which looks aligned perfectly, for this purpose i used the table. Now will work on the hint u provided.