5

I am using ibm websphere and creating a Dynamic web project. All of my JSP files are in my WEB-INF folder and i use servlet mapping in my web.xml file to make them accessible. This has worked fine so far. however i have problem with my CSS. as always, my CSS file is located in WebContent in a folder named css. heres my link for my jsp

<link rel="stylesheet" href = "css/styles.css">

I'm having no luck getting my css to show...
what am i missing?

Luc M
  • 16,630
  • 26
  • 74
  • 89
Jimmy Servlet
  • 155
  • 2
  • 3
  • 12

2 Answers2

12

The relative URLs in the generated HTML output are by the browser interpreted relative to the request URL (as you see in browser's address bar), not to their physical location in the server's disk file system. It's namely the webbrowser who has got to download them by a HTTP request, it's not the webserver who has got to include them from disk somehow.

One of the ways is to use a domain-relative path for those resources, i.e. start with /. You can use ${pageContext.request.contextPath} to dynamically inline the current webapp's context path.

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

This will end up in the generated HTML output as follows:

<link rel="stylesheet" href="/yourContextPath/css/styles.css">

This way the browser will be able to download them properly.

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • i tried but no luck – Jimmy Servlet Apr 27 '12 at 18:06
  • My answer assumes that the `/css` folder is in the root webcontent folder. There where the `/WEB-INF` folder also resides. If it is in a different folder or even inside `/WEB-INF`, then it will obviously not work. You need to make sure that the `` resolves to **exactly** that URL as you would enter directly in browser's address bar in order to manually download the CSS file. – BalusC Apr 27 '12 at 18:07
  • formatting didnt work, but yea i have the WebContent folder with my css folder and WEB-INF folder inside of it. the WEB-INF holds all of my JSP files – Jimmy Servlet Apr 27 '12 at 18:19
  • If i were to attempt to reach the css file manually, on local host, what would that format be? http://localhost:8080/'project name'/WebContent/css/styles.css?? would it be project name or my context root? – Jimmy Servlet Apr 27 '12 at 18:21
  • Just `http://localhost:8080/yourContextPath/css/styles.css` where `yourContextPath` is, well, your context path. This is by the way exactly the URL as the `` in my answer resolves to. So that shall probably not return the desired CSS for you, but a 404. This can in turn be caused by the CSS file not actually being there where you think it is, or a typo in the URL (case sensitive!), or the webapp/server not being fully rebuilt/redeployed/restarted after changes in project, etc, or an overzealous servlet or filter which is doing its job wrong. – BalusC Apr 27 '12 at 18:22
  • ah, no luck :( thanks for you help though. im going to keep searching – Jimmy Servlet Apr 27 '12 at 18:24
  • Create a dummy filter, put a breakpoint in `chain.doFilter()` call and debug from there to understand why exactly it returns 404. It might happen that you've somewhere a servlet or filter mapped on for example `/*` which is doing its job wrong. – BalusC Apr 27 '12 at 18:26
  • What is pageContext in here? pageContext.request... How does that work? – Koray Tugay Nov 07 '13 at 18:44
  • @Koray: it's an implicit JSP EL object like as `#{facesContext}` is in JSF (which you should be familiar with). It refers the current instance of JSP-specific `PageContext` class which in turn has several Javabean-like getter methods such as `getRequest()` returning the current `(Http)ServletRequest` which in turn has a `getContextPath()` method. See also http://stackoverflow.com/tags/el/info Note: if you're actually looking for JSF equivalent of this question&answer, head to http://stackoverflow.com/q/8367421/ and http://stackoverflow.com/q/10113436/ – BalusC Nov 11 '13 at 18:48
0

I think you need to see it from the browser's perspective, how it is the URL of the page, the context path and the current path.

If your app context path is for example "myApp" then you can do something like this to make it work:

<link rel="stylesheet" href = "/myApp/css/styles.css">

If you want to make it relative so it does not depend on the context path, then if your url looks like http://localhost:8080/myApp/myservlet/file.jsp

Then your link tag would be

<link rel="stylesheet" href = "../css/styles.css">

Firebug or the chrome console may be really helpful to understand what the browser is trying to fetch.

Hope this helps!

Juan Alberto López Cavallotti
  • 4,644
  • 3
  • 25
  • 43
  • ok so by context root you mean the context path? let my try that. do i need to have the WebContent folder in the path for the href link as well??? – Jimmy Servlet Apr 27 '12 at 17:49
  • Just try with firebug or the console so you know what I mean :) You should see a failed request with a 404 error for your css file, then you can see where the browser expects it to be. – Juan Alberto López Cavallotti Apr 27 '12 at 17:51
  • i clicked the CSS tab on the little firebug bar in firefox and it just says "There are no rules. You can create a rule." – Jimmy Servlet Apr 27 '12 at 17:55
  • im able to go in and use that "create a rule" to edit my css and make my

    tag blue, haha. will it tell me the path it wants then?

     – Jimmy Servlet Apr 27 '12 at 18:05