.htaccess - 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 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....

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