stylesheet now seen under some conditions without "/". Convention?

[mscir]

I have a question I'm hoping someone here can answer.

I customized a 403.html page on a site so if people tried to access
protected folders they would see that page and still be able to navigate
the site, the generic 403 error page provided by the host was too boring
and provided no explanation or site navigation.

All of the pages on the site use an external stylesheet, I placed this
line in the head section of each page:

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

All web pages are in one folder, styles.css is in the same folder. The
site works great except I ran into an interesting problem:

I created a protected sub-folder "/archive" under the folder the site
files reside in. Then I testd whether the 403.html page I made would
show up correctly if I tried to access the protected folder from my
browser (not loggin in with an FTP program) as a public user. If I tried
to access the folder like this I saw the 403 page correctly:

url/archive

But if I tried to access the folder like this (with an ending slash) I
saw the page I made without the styles in the stylesheet applied:

url/archive/

To fix it, the site host suggested I add a slash before the stylesheet
name. When I did that the styles were applied correctly in both cases!

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

Can any body explain that? Is it always recommended that a slash is
always used to represent the relative url before a stylesheet name -
even if it's in the same folder as the pages that reference it? Is it
better to always name the absolute url of the stylesheet? I'm wondering
if there's a convention, or recommended policy.

Thanks,
Mike

 

[brucie]

In alt.html mscir said:

<link href="styles.css"

styles.css is in same directory as file that uses it.

<link href="/styles.css"

styles.css is in the root directory.

 

[Michael Fesser]

.oO(mscir)

I created a protected sub-folder "/archive" under the folder the site
files reside in. Then I testd whether the 403.html page I made would
show up correctly if I tried to access the protected folder from my
browser (not loggin in with an FTP program) as a public user. If I tried
to access the folder like this I saw the 403 page correctly:

url/archive

But if I tried to access the folder like this (with an ending slash) I
saw the page I made without the styles in the stylesheet applied:

url/archive/

To fix it, the site host suggested I add a slash before the stylesheet
name. When I did that the styles were applied correctly in both cases!

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

Can any body explain that? [...]

In case of an 403/404/... the response from the server contains the
content of the error page, not a redirect or something like that. So the
browser displays the received content under the URL that caused the
error and will use that(!) URL to resolve any relative URLs inside the
error page.

In your case when you link to the stylesheet with just "styles.css" this
relative address is resolved differently, dependent on how you called
the error-causing page:

* www.example.com/archive
current directory is the site root /, so all relative URLs will be
resolved to start from there
-> www.example.com/styles.css

* www.example.com/archive/
current directory now is /archive/
-> www.example.com/archive/styles.css (which will cause a 404 error)

Is it always recommended that a slash is
always used to represent the relative url before a stylesheet name -

Yep, at least in this case.

even if it's in the same folder as the pages that reference it?

It's an issue of how a browser resolves relative URLs.

Is it
better to always name the absolute url of the stylesheet? I'm wondering
if there's a convention, or recommended policy.

I use root-relative URLs in most cases, whether they are really
necessary or not.

Micha

 

[Toby Inkster]

Can any body explain that? Is it always recommended that a slash is
always used to represent the relative url before a stylesheet name -
even if it's in the same folder as the pages that reference it?

A leading slash makes the URL an absolute reference instead of a relative
one. This means that wherever your page is within your site's structure,
the link to the stylesheet will always point to the right place.

 

[mscir]

A leading slash makes the URL an absolute reference instead of a relative
one. This means that wherever your page is within your site's structure,
the link to the stylesheet will always point to the right place.

Thanks to all who posted!
Mike