404 page's style is gone after adding slash to url

Hi, I have an error 404 page at the root of my site and the main stylesheet at the root of my site also. Is this the best way I should be doing this? because going to an unfound page
at the root of my site,

example: mysite.com/blahblah

loads the 404 page with style from the stylesheet I mentoned earlier,

but going to an unfound page that has a slash at the end,

example: mysite.com/blahblah/

loads the 404 page without the style from the stylesheet.

The way I fix this is to add two stylesheet links to the 404 page like this:

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

, that looks a little messy. Anyone know a more efficient way to fix this?

There are two types of URLs: absolute and relative. The two URLs that you’re specifying in your link tags in your example are relative URLs.

  • style.css implicitly means "look in the same directory as the current file for a file named style.css"
  • ../style.css implicitly means "look in the parent directory of the current file for a file named style.css"

These would work if your website only goes one directory deep. But what if you have files two, three, or more directories deep in some cases? You would need to have one link tag for each of those _ n __ cases. This also would mean that  n-1 _ of those cases on every page would fail to load, which is a waste of a bunch of bandwidth.

Instead, you can use:

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

The /style.css implicitly means "go to the root directory of the current website and load the file named style.css", which is exactly what you want. This way you only need one link tag and everything should work.

I hope that helps!

1 Like

helps, thanks.

you restructured the setup of the site,Can you try again with firefox