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 URL path such as http://example.com/test the 404 not found comes up as it should.
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.
In addition, the URL occasionally resolves to http://example.com/example.com/kontakt having the actual domain example.com in there.
Maybe someone has an explanation/solution for this problem....
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
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;
}
...
