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?
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.
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"/>
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.
Related
I have a problem with my webmatrix in using an external style sheet,the page still loading and nothing appear,but when I put the css I used in a style tag inside the head tag the problem is solved , but i need to put them in an external file ... how ?
why I faced that problem ?
There isn't anything you do differently in WebMatrix for this (except that you may want to prepend the path to your file with a tilde (~) which has the effect of telling the server-side code to make an absolute path out of a relative one in ASP.Net Web-Pages [not sure about Web-Forms or MVC]).
You just do this:
In your HTML Page (in the <head> section):
<link href="~/someDirectory/someCSSFile.css" rel="Stylesheet" type="text/css" />
Then just make sure the css path and file name are correct, and you're good to go.
When I include a jquery-ui stylesheet for a resizable jquery-ui dialog remotely like so
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" />
I get this result:
but when I download the very same file and include it locally like so
<link rel="stylesheet" type="text/css" href="./jquery-ui.css" />
I get this result:
Note the missing resize handle in the lower right corner which seems to be the only difference.
What causes the difference?
Jquery-ui references a bunch of image sprite sheets. When including the reference from ajax.googleapis.com the path to the image resolves properly because google hosts those images on their server and has them in the proper location. However in your local copy of the jquery-ui.css i'm guessing there's a good chance your images are not in the proper location.
I'm using jquery ui in a current project and my folder structure is:
Content
images <--- this is the jquery ui sprite iamges folder
jquery-ui.css
go to /jquery-ui.css and make sure the bg paths are path correctly
In a Wicket 1.4 app, I have some static CSS & JS resources under [project root]/WebContent/css and [project root]/WebContent/js respectively.
My Wicket HTML files are in src/resources/fi/company/product/pages with corresponding Java classes in src/main/fi/company/product/pages. (In the resulting WAR file, the HTML & property files are of course in the same places as Java classes.)
The HTML files contain references to the resources such as:
<head>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="js/calendar.js"></script>
</head>
This works fine everywhere (or so we thought until recently). NB: my Java code does not reference these resources at all.
Looking at the source of a rendered page (whose URL is e.g. http://localhost:8080/report/42.4 or http://localhost:8080/?wicket:interface=:6:::: ), the resource reference appears as:
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
However, we just noticed that when the app is deployed somewhere else than (Tomcat) root, the resources break on non-bookmarkable pages.
In other words, when the URL is e.g.
http://localhost:8080/foobar/?wicket:interface=:2::::
and a page refers to
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
...the browser tries to fetch the resource at the invalid URL
http://localhost:8080/css/main.css
Now, what is the simplest (yet non-hacky) way to get these static resources working, regarless of the deployment path?
I could switch to using bookmarkable pages exclusively (which would require changing the constructors of the pages), but I suppose that shouldn't be necessary...
Edit: Looks like I got CSS resources working (on most places) simply by using <wicket:link>, as advised in this answer:
<head>
<wicket:link>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</wicket:link>
</head>
However, now the CSS references are broken on a page with an URL like http://localhost:8080/foobar/report/42.9
Wicket is trying to do something strange with the "css/main.css" path:
ERROR org.apache.wicket.RequestCycle - Can't instantiate page using constructor public fi.company.product.pages.ReportPage(org.apache.wicket.PageParameters) and argument 0 = "css" 1 = "main"
org.apache.wicket.WicketRuntimeException: Can't instantiate page using constructor public fi.company.product.pages.ReportPage(org.apache.wicket.PageParameters) and argument 0 = "css" 1 = "main"
at org.apache.wicket.session.DefaultPageFactory.createPage(DefaultPageFactory.java:212)
at org.apache.wicket.session.DefaultPageFactory.newPage(DefaultPageFactory.java:89)
at org.apache.wicket.request.target.component.BookmarkablePageRequestTarget.newPage(BookmarkablePageRequestTarget.java:305)
Edit 2: Actually I'm not sure if <wicket:link> is the right solution here, since these resource files are not "class path resources". I guess my question is, can you make this work while still using web context resources (i.e., without making these class path resources)?
Right, I solved it, and the solution turned out to be very surprising.
Earlier I wrote:
A curious thing is that without any changes, it seems I can no longer
reproduce the problem...
That wasn't quite true, as I had made one small change (that I thought was inconsequential): I had deleted a file WebContent/index.jsp which in our project was a remnant that served no purpose.
Once it dawned on me that this could have fixed it, I did some more testing, and indeed:
For static resources to work as expected, you must not have an index.html or index.jsp file in the root web content directory (i.e., the parent of the CSS and JS resource dirs), as that in some cases breaks ../ references.
This probably isn't even Wicket-specific, but perhaps it is Tomcat-specific—if anyone knows more, feel free to chime in. I'm dubious whether this question ever helps anyone else, but still, glad I got it working!
I got "dump" isp that always cached internet pages and its css for at least 1 day.
Although the css / js in the server changed, the presented css are not changed (i have been clear my cache everytime)
how to "tell" my isp not to cache some files like css and js ?
thank you !!
at the moment: i'm using proxy to check a under developed web so that it don't get cached ..
The way Stack Overflow itself solves this problem is to add a version parameter to the CSS and JS URLs, which refer to the version of the referenced files:
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=4542">
Every time the referenced files change, the href attribute of the link tag is updated in the HTML code, thus supporting caching and updated referenced files.
You could try to append some random string to every request of an external file like:
<link href="/css/style.css?cachekiller=1337" media="screen" rel="stylesheet" type="text/css" />
where the 1337 in the above code should be generated randomly for every request e.g.
<?php time() ?>
or something
You can include these documents directly in your HTML files, between <script> or <style> tags. It will obviously make all your HTML files bigger, but that's basically what you're asking.
It's the only way you can be 100% sure that your CSS and JS is not cached at all.
I have this quite popular problem, but have failed to find a solution that works.
Basicly, I am using a Master Page (/Masterpages/Default.master), that includes
<link href="../css/style.css" rel="stylesheet" type="text/css />
And it also includes some images with the same relative linking.
But when I apply the Master Page to content pages (in diffrent folderlevels) the css formating and images is lost.
Is there anyway to dynamicaly solve the folderlevel links to css and images to all content pages using the masterpage?
Thanks in advance
UPDATE:
There is an additional problem. It's tricky to get the output to render correctly in both the browser and in design view in Visual Studio.
I got it to work by using the asp:image solution for the images in the masterpage and by double linking the css in the masterpage, one to make it render in VS and one to make it render correctly browsing the site.
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" />
best to use:
<link href="<%=ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css />
since this will cope with iis application roots unlike:
<link href="/css/style.css" rel="stylesheet" type="text/css />
You can make your link runat="server" and use tilde mapping to make the CSS path relative to the site root.
<link runat="server" id="siteStyle"
href="~/css/style.css"
rel="stylesheet"
type="text/css" />
The images referenced in the CSS should be relative to the location of the CSS file and should resolve normally once the CSS file itself is included properly. For images in tags on the page, you would need to use the ASP:Image control and, again, use the tilde mapping for a path relative to the root.
Fairly sure this will work
<link href="/css/style.css" rel="stylesheet" type="text/css />
/ takes you to the root of your site
You can use the tilde to get the link to work from anywhere. This will work in Images as well.
<link runat="server" href="~/css/style.css" rel="stylesheet" type="text/css />
Images in CSS are relative to the file they are referenced from.
(An exception from this is the "filter" rule in Internet Explorer which is used for PNG fixes. The images in this case are relative to the HTML document.)
Yes, the problem is that the materpage is using a relative url to load the CSS:
"../css/style.css"
you need to change this to the site root (depending on the location of your css files) something like:
"/css/style.css"
than all the various folder levels can use the same url.
Actually, master pages will rebase css files for you automatically, without you having to add runat="server". Be sure that your css file is located one directory down in the folder you specified.
You can use an absolute path to the css file, but visual studio doesn't seem to render the styles in design view when you do this. Also, sometime you won't know if you're going to be running in a virtual directory, so it's not always ideal to use the absolute path.
Also, use relative links to your image assests from the css file itself - which will work irrespective of how you link to your stylesheet.
You might also be interested in looking into themes and skins.
ASP.NET Themes and Skins Overview