Andrew Pollack's Blog

Technology, Family, Entertainment, Politics, and Random Noise

File this under "Damn, I should have known that" -- CSS and Relative Paths

By Andrew Pollack on 03/18/2010 at 07:33 AM EDT

I was whining about a feature being missing in Designer 8.5.x yesterday in a closed forum for "Design Partners" when I learned something I wished I'd known a long time ago. I'm writing this to share it with you, so you can be saved the work I've been doing.

The feature I wanted (and still want) is for file resources that use the new editors (e.g. CSS, HTML, JAVASCRIPT) to allow "<computed text>" values or at least some form of tokenization to allow you to include things like "@webdbname" and profile document values in your CSS or Javascript files Without such a feature I've had to create "page" elements instead without the snazzy editors.

I was describing the problem in context of CSS pages and paths to image resources stored in the same database, when Nathan made a comment that it just seems to work fine for him. So, of course first I declared that I was more than 99% sure that was impossible, but then (giving the man his due) I decided to research it. Of course, I learned something I should have known.

If you look at the CSS Spec ( ) section 6.4 clearly states

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document:.
So, what that means in a Domino database is that if you have a file resource, it is always accessed relative to the top of the NSF (e.g. ../../mydatabase.nsf/myImage.jpg ) and your CSS file is the same (e.g. ../../mydatabase.nsf/mystyle.css ). Even if the document you're loading the css from is in a different database, or in a view or document buried down somewhere inside that database, as long as the images referenced in the css URL() statements are in the same database as the CSS file itself, they'll be seen and loaded correctly without having to specify the full path to the images.

In other words, if you have mystyle.css as a file resource in mydatabase.nsf, and it contains this statement:

div.myFancyDiv { background-image:url(mybackground.jpg) ; }

It will work even if you are calling to /mydatabase.nsf/mystyle.css from another database, another server, a view nested deeper in the same database, or anywhere else.

When I think of how many wasted hours I've spent.....ugh.

There are  - loading -  comments....

re: File this under "Damn, I should have known that" -- CSS and Relative PathsBy Nathan T. Freeman on 03/18/2010 at 08:25 AM EDT
As much as I'd love to sit here and gloat, the truth is that I read your
question and though "wait, I know Tim doesn't do that when skinning our
applications." Since he's 15 feet away, I just asked him, and he replied that
he simply never needed to use any path information when the image resource was
local. But I couldn't have told you with a gun to my head whether that was
because Xpages, Domino or the CSS spec had a rule about how relative paths

One potentially useful thing I can tell you is that Xpages has some automatic
translation of paths for anything coming from Dojo. And if you drop later
versions of Dojo into a sibling path to the default dojo1.3.2 folder on your
server, it will use those instead. That's how we were able to include some
1.4.1 stuff in recent projects.

Anyway, I'm glad to have introduced anything that will save you work. Sorry
we didn't have this conversation 5 years ago. :-)
re: File this under "Damn, I should have known that" -- CSS and Relative PathsBy Charles Robinson on 03/18/2010 at 10:02 AM EDT
When I played around with Domino web apps a few years ago (6.x) I stumbled
across this functionality. I read the CSS spec and just assumed everyone else
already knew about it, and I didn't because I was a newbie. :-)
re: File this under "Damn, I should have known that" -- CSS and Relative PathsBy Bruce Lill on 03/18/2010 at 11:30 AM EDT
It's relative to the last "/" which may or may not be the filename. If you set
an xpage to the launched at start-up it will point to the path not the nsf >>
web/home.nsf has h.xsp as start-up page will have a relative path of web/ but
web/home.nsf/h.xsp will work.

I see this when developers also put the css in the HTML of the form/page
instead of as a CSS file.

Always test in a sub-folder.
re: File this under "Damn, I should have known that" -- CSS and Relative PathsBy Andrew Pollack on 03/18/2010 at 11:49 AM EDT
that depends. If the xpage calls out to an external css file, then it's the
last / (the realm) that the CSS file resides in, not the xpage -- at that
point, the xpage's location has no relationship to the relative path of the
objects referenced in the external css file.

Other Recent Stories...

  1. 03/21/2018Domino Apps on IOS is a Game Changer. Quit holding back.BOOM. This will be as important for the platform as Traveler. If your company has ditched Notes and Domino, I feel sorry for you. For companies that do use Notes/Domino this is a game changer and Apple should be paying attention. Here's why: There are hundreds of little Notes client applications you'd never spend the time and money to build and deploy for your internal user base on IOS that we use Notes for all the time (those of us still using it). Now, those are suddenly ALL available on the iPad. ...... 
  2. 02/15/2018Andrew’s Proposed Gun LawsThese are my current thoughts on gun laws that would radically change the culture and safety of gun ownership in the United States without removing the rights of gun owners or compromising their privacy rights. * Please feel free to link to, or just copy, these ideas. It would be wonderful to see them spread widely and eventually become the basis for something to rally around and become legislation. Update: 3/3/2018 I added #7, increasing the age to purchase. Update: 4/27/2018 Please be aware that I am not ...... 
  3. 05/05/2016Is the growing social-sourced economy the modern back door into socialism?Is the growing social-sourced economy the modern back door into socialism? I read a really insightful post a couple of days ago that suggested the use of social network funding sites like “Go Fund Me” and “Kickstarter” have come about and gained popularity in part because the existing economy in no longer serving its purpose for anyone who isn’t already wealthy. Have the traditional ways to get new ventures funded become closed to all but a few who aren’t already connected to them and so onerous as to make ...... 
  4. 04/20/2016Want to be whitelisted? Here are some sensible rules for web site advertising 
  5. 12/30/2015Fantastic new series on Syfy called “The Expanse” – for people who love traditional science fiction 
  6. 10/20/2015My suggestion is to stay away from PayAnywhere(dot)com  
  7. 08/07/2015Here is one for you VMWARE gurus - particularly if you run ESXi without fancy drive arrays 
  8. 08/06/2015The Killer of Orphans (Orphan Documents) 
  9. 06/02/2015Homeopathic Marketing: Traveler on my Android is now calling itself VERSE. Allow me to translate that for the IBM Notes community... 
  10. 03/17/2015A review of British Airways Premium Economy Service – How to destroy customer goodwill all at once 
Click here for more articles.....

pen icon Comment Entry
Your Name
*Your Email
* Your email address is required, but not displayed.
Your thoughts....
Remember Me  

Please wait while your document is saved.