By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,501 Members | 1,249 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,501 IT Pros & Developers. It's quick & easy.

404 issue: a CSS problem?

P: 12
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!
Oct 15 '08 #1
Share this Question
Share on Google+
14 Replies


Atli
Expert 5K+
P: 5,058
Hi.

You are using a relative link to load your CSS file.
Expand|Select|Wrap|Line Numbers
  1. <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.
Expand|Select|Wrap|Line Numbers
  1. <link href="/css/css.css" .../>
Oct 15 '08 #2

P: 12
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
Oct 16 '08 #3

Atli
Expert 5K+
P: 5,058
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.
Oct 16 '08 #4

P: 12
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
Oct 19 '08 #5

Markus
Expert 5K+
P: 6,050
So prepending a forward slash tells the browser to start from the web root?
Oct 19 '08 #6

Atli
Expert 5K+
P: 5,058
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).
Oct 19 '08 #7

Atli
Expert 5K+
P: 5,058
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:
Expand|Select|Wrap|Line Numbers
  1. <link href="css/css.css" rel="stylesheet" type="text/css" />
with this:
Expand|Select|Wrap|Line Numbers
  1. <link href="/css/css.css" rel="stylesheet" type="text/css" />
and the CSS loaded just fine every time.
Oct 19 '08 #8

P: 12
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
Oct 19 '08 #9

Atli
Expert 5K+
P: 5,058
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.
Oct 19 '08 #10

P: 12
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!
Oct 19 '08 #11

eWish
Expert 100+
P: 971
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:
Expand|Select|Wrap|Line Numbers
  1. <img src='banner.jpg' alt='some alt text' />
To:
Expand|Select|Wrap|Line Numbers
  1. <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
Oct 19 '08 #12

P: 12
Looks good, thanks Kevin.
Oct 20 '08 #13

Atli
Expert 5K+
P: 5,058
Expand|Select|Wrap|Line Numbers
  1. <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:
Expand|Select|Wrap|Line Numbers
  1. <img src='/banner.jpg' alt='some text' />
Oct 20 '08 #14

eWish
Expert 100+
P: 971
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
Oct 20 '08 #15

Post your reply

Sign in to post your reply or Sign up for a free account.