404 not found - broken links to CSS, images

Question

I am experiencing a strange problem regarding broken links to the CSS and image files.

On our website everything works as expected. If you type in a non existing UR

Answer 1

This is because you are using relative paths to your resources (CSS, JS and image files). You need to use either root-relative (starting with a slash) or absolute URLs.

Alternatively, use a base element in the head section that tells the browser what the relative URLs are relative to. For example:

<base href="http://example.com/">

(Note, however, that there are caveats when using the base tag if you have in-page anchors eg. href="#top" or need to support IE6?!)

However, if you type in a different path http://example.com/another/test.html the 404 page comes up as well but the links to the css and images are broken.

For example, a URL like css/normalize.css in the page at this address will resolve to http://example.com/another/css/normalize.css, when you are expecting it to be relative to the document root.

In addition, the URL occasionally resolves to http://example.com/example.com/kontakt having the actual domain example.com in there.

This sounds like you are missing the scheme from some of your links, for example:

<a href="example.com/kontakt">Link Text</a>

Whereas it should be:

<a href="http://example.com/kontakt">Link Text</a>

Or, protocol relative:

<a href="//example.com/kontakt">Link Text</a>

---

See also my answer to this question over on the Pro Webmasters stack: https://webmasters.stackexchange.com/questions/86450/htaccess-rewrite-url-leads-to-missing-css

Answer 2

In my case, there were already location blocks in my conf file for the files suffering from broken links, the blocks just weren't configured properly.

Here's what I ended up with in my default.conf. For all URIs ending in "/sad.svg", it serves the file at the specified directory, ignoring any path earlier in the URI.

...
  error_page 404 /404.html;
  location = /404.html {
          root /var/www/errors;
          internal;
  }

  location ~* ".*/sad.svg"  {
      alias /var/www/errors/sad.svg;
      access_log off;
  }
  location ~* ".*/twitter.svg" {
      alias /var/www/errors/twitter.svg;
      access_log off;
  }
  location ~* ".*/gitlab.svg" {
      alias /var/www/errors/gitlab.svg;
      access_log off;
  }
...