Problems referring a css from an XHTML

Question

In my JSF Application (My faces 1.2.3) , I am referring to a css file as

<link href="css/nav.css" type="text/css" rel="stylesheet" />, 

This worked when the rendered HTML is accessed as an HTML file using the browser but not inside my customized servlet container.

It wasn't referring correctly, eventhough the relative path was correct. Then I tried with

<link href="../css/nav.css" type="text/css" rel="stylesheet" />

It worked in a browser and did not in some other browsers.

I was told that I should use facelets.DEVELOPMENT" = true to make it work , It worked in Dev Env and it did not in Test Env (There will be some inherited properties!!! and not everything will be used from my application)

I have some knowledge on these accompanying technologies but not an expert. Wondering whats the issue and where ? - Servlet Container , XHTML , Facelets , JSF Impl ?

Any Idea - What could be the problem?

Answer 1

One potential solution here would be to use a root relative path, something like.

/MyCSSFolder/myfile.css

In most cases this can resolve the issues.

Answer 2

A relative <link> URL is relative to the request URL as it is on the client side, in the webbrowser's address bar (the webbrowser is namely the one responsible for loading the CSS files), it is not relative to the folder structure as it is on the server side.

So if the request URL is for example http://example.com/context/page.jsf, then the CSS which is referenced by href="css/nav.css" will be loaded by http://example.com/context/css/nav.css and the CSS referenced by href="../css/nav.css" by http://example.com/css/nav.css.

If you still stucks with this, then you need to post both the absolute URL with which you can request the page in question successfuly and the CSS file itself. This way we can explain you which relative URL to the CSS file you should be using for the page in question.

Answer 3

Probably the problem is that your application is not absolute to the request url Lets assume that you access your application via:

http://localhost/my-app/

And now when you try to load a resource as you described above

<link href="css/nav.css" type="text/css" rel="stylesheet" />

It will be loaded by

http://localhost/css/nav.css

I would suggest using the context path property when referring resources.

<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/style.css"/>