404 issue: a CSS problem?

[updw123]

Hi all,

I've created a 404 page which seemed to be working well in most circumstances, for example:
http://www.p-s-i.org.uk/bad_page

However it was pointed out to be when the faux page appeared in a sub-folder, all CSS seemed to be lost. For example:
http://www.p-s-i.org.uk/links/bad_page

Does anyone have any ideas?

Thanks in advance,
Dave
PS - sorry for the validation errors!

[Atli]

Hi.

You are using a relative link to load your CSS file.

<link href="css/css.css" .../>

As a result, when your browser tries to load this from:
www.p-s-i.org.uk/bad_page, it correctly loads the www.p-s-i.org.uk/css/css.css file.

But... when you request www.p-s-i.org.uk/links/bad_page, it tries to load www.p-s-i.org.uk/links/css/css.css which doesn't exist.

Try adding a single / in front of your link href. That should tell the browser that the url is absolute, so it should start look at the web-root, rather than relative to the current page.

<link href="/css/css.css" .../>

[updw123]

Good thinking, thanks Atli!

I don't suppose anyone knows much about DW to know whether they have a replace all function? Or whether it would be easier to actually create a css route for each subfolder?!

Thanks again,
Dave

[Atli]

If you change the link in all of your files to the absolute URL I posted they would all load the same CSS file, no matter where they are in the file structure.

In Dreamweaver, you can do "Edit->Find and Replace", change the "Find in" dropdown to "Folder", select the root folder for your web, put the old link on "Find", your new link in "Replace", and do "Replace all"... that should take care of all the links.

[updw123]

Thanks Atli.

I'm not sure if it's something I'm doing wrong but I gave that a go and it didn't seem to make any difference.

Speak soon,
Dave

[Markus]

So prepending a forward slash tells the browser to start from the web root?

[Atli]

Yes. A link starting with a forward slash is treated as an absolute URL, just like you had written http://example.com/ in front of it. (Assuming your page is located at example.com, obviously).

[Atli]

Thanks Atli.

I'm not sure if it's something I'm doing wrong but I gave that a go and it didn't seem to make any difference.

Speak soon,
Dave

What exactly did you do?
Can you show us an example?

I tried applying the solution to your pages using Opera's handy source modifying thing and it seemed to work.

I tried a few invalid URL's, like http://www.p-s-i.org.uk/links/bad_page, and simply replaced this:

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

with this:

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

and the CSS loaded just fine every time.

[updw123]

Hi Atli,

This isn't something I've come across before.

I applied the change to all pages. So for example if you visit any page, the / is present in the code, for example:
http://p-s-i.org.uk/education/universities.html

But when you type in a non-existent URL the / is not present, e.g.:
http://p-s-i.org.uk/education/bad_page

I'm really not sure what to do on that..

Speak soon,
Dave

[Atli]

There must be a page somewhere that loads instead of the typical 404 error, when a user tries to access a page that doesn't exist.

You need to find that page and change this there.

If you are using Apache, you can find this by going into the configuration file (or the .htaccess file in your web-root) and find the "ErrorDocument 404" directive. That should point you to the correct file.

[updw123]

Thanks Atli. I don't know how it got missed from the find all.

Although now it works, it won't display any images. The struggle goes on!

[eWish]

My suggestion would be to make the image files and links all absolute on the error page. Then you should not have any problems.

Change:

<img src='banner.jpg' alt='some alt text' />

To:

<img src='http://p-s-i.org.uk/banner.jpg' alt='some text' />

I would also do the same thing with the links to other pages. This might seem like a headache now but will be a lifesaver when someone enters a url like http://p-s-i.org.uk/some_dir/another...ir/another_dir. The links will not be found and it will be a big circle.

--Kevin

[updw123]

Looks good, thanks Kevin.

[Atli]

<img src='http://p-s-i.org.uk/banner.jpg' alt='some text' />

I wouldn't add the "http//p-s-i.org.uk" part tho.

Like I suggested before, if you simply prefix a forward slash to the link, your browser should interpret that as an absolute URL as well.
That also makes you web more portable, because you will not have to go through all your code and change every link if this is every to be used on another domain.

This would be equivalent to the <img> tag you posted:

<img src='/banner.jpg' alt='some text' />

[eWish]

My suggestion was meant to be for the error pages only. That way you are assured it works regardless of what the user enters.

--Kevin