Trouble with www and non-www, css url and images missing

[Stu]

Hi Bruce/Folks,

Here's the situation.

I've got all internal links (images, css, scripts) in my site pointing to fully qualified urls, rather than relative.

I did this because I have a lot of redirect logic going on, and found that if I didn't do this the urls were the original url + the relative path.

There might be a better way around this problem, sure. If there is, Bruce, be gentle.

However, there comes a problem with this.

Depending on whether or not you use "www" or the root non-www url to get to the site, the css url('<relative path>') calls mean that images/icons won't show.

To get a visual on this, visit 1) http://sandersnoonan.com.au - working great!, then visit 2) http://www.sandersnoonan.com.au - the little icons (css url('') relative folders) aren't showing.

[Edit: You'll want to visit those urls in separate incognito browser tabs, as if you visit them one after the other the icons work okay]

So the relative paths in the css will have http://www.sandersnoonan.com.au added on, and I'm guessing? that this stops things from working?

Really not sure what's happening here, but am guessing it'll be a simple enough solve.

This stack is interesting (http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to). The W3 rules are that the relative url in a stylesheet is relative to the documents folder. So why does "www" / non-www make a difference?

Cheers.

[Bruce]

I'm not sure of the www / non-www difference - I guess one would want to see exactly what names were in play to sort that out.

However regarding relative positioning, there are actually 3 ways of doing a link.

it's common to see this;
<link rel="stylesheet" type="text/css" href="styles/capesoft.css?a=1" />

this is the relative to the _page_ location. So if the url was
www.capesoft.com/accessories/index.htm
then the above looks in
the accessories/styles folder for the css.

then you get
<link rel="stylesheet" type="text/css" href="/styles/capesoft.css" />
(note the leading / on the href)
This makes the file "host" relative (where host is www.capesoft.com). So if the url was
www.capesoft.com/accessories/index.htm
then the above looks in
the /styles folder for the css.

This is the approach (above) that I use most of the time.

then you also get
<link rel="stylesheet" type="text/css" href="http://www.capesoft.com/styles/capesoft.css" />
This is not relative to anything - it's a specific file in that location. And it's fixed to http (not https) which is a bit of a pain.

cheers
Bruce

[Stu]

Hi Bruce,

Okay, so maybe I've put a fix into place for a problem that has a better solution.

When you get into url rewriting in webhandler, relative paths have issues. When you change the url they become relative to that url, probably because they're of the first type you mention below.

So I'm thinking I might need to try with the slash in front of the folder name. Right. Which makes it relative to the host. That might be it.

Will report back with findings.

[Stu]

Exactly what was needed. Thank you Bruce, much appreciated!