Question

I have downloaded a complete website that will be upgrading for a client.
I have noticed the code is unable to locate files (css,js,images etc.).
The paths are coded like this — with a forward slash in the beginning /.
Removing those / from the beginning of each href, src or whatever
solves the issue on the local machine but of course messes things up online.

this will not work locally:

href="/design/layout.css"

this will (first slash removed)

href="design/layout.css"

What is the reason for this difference?
is there a system variable of some sort the a need to configure in order to get both servers to treat paths the same way?

Answer 1

If there is a / at the beginning of an relative URL then it is resolved as absolute path to the web root of a domain.

Example absolute path (with / at the beginning):

in a file on domain.com/test/other/path/test.html
href="/design/layout.css" -> browser searches at domain.com/design/layout.css

in a file on domain/test.html
href="/design/layout.css" -> browser searches at domain.com/design/layout.css

Conclusion absolute paths
Browser searches at the same place both times.

Example relative path (without / at the beginning):

in a file on domain.com/test/other/path/test.html
href="design/layout.css" -> browser searches at domain.com/test/other/path/design/layout.css

in a file on domain/test.html
href="design/layout.css" -> browser searches at domain.com/design/layout.css

Conclusion relative path
Browser searches at different places.

---

Solution

You can add a Apache Alias in your .htaccess or .conf file, this forces the server to output the content of the second path when requesting the the first path. In your case, Apache outputs the CSS files from the new path instead of /design/.

Example of Apache Alias

Alias /design /your/new/path/design