Problem - relative URLs stop working on local server?

Dave!

Hey folks,

Having a wierd problem here, maybe ye can help me out.

I'm gonna be working on a website in work, and I want to work on it locally obviously.

I've FTP'd all the files and directories down to the document root for XAMPP/Apache, but when I open the page all of a sudden the CSS is not being applied.

The CSS and JS is all being included with the following:

<?php
			include ('includes/scripts.inc.php');
		?>

which contains

<script src="/js/external.js" type="text/javascript"></script>
		<script src="/js/swfobject.js" type="text/javascript"></script>
		<script src="/js/jquery-1.2.6.min.js" type="text/javascript"></script>

When it reaches the browser, you end up with

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

This doesn't work for some reason, but when I change it to (omit the first /)

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

it does work.

Any ideas why this would work on a live server, but not on my local one? Surely it's some kind of server configuration thing?

The server is working fine, PHP is being run, etc.


Cheers gang...

conor.hogan.2

No idea, but I have found that xamp (well mamp) was weird with files, usually required messing with adding/removing some slashes or changing back to forward slashes on windows etc.

But then again I never learned about proper directory structure, so was winging it a little bit.

It might be becuase you are working with a windows machine and the server is linux based?

Dave!

Thanks conor

Might it have something to do with the .htaccess file?

I'm no good with these, but this one has heaps of RewriteRules and 301 redirects

conor.hogan.2

Ah it seems without the first slash the link is a relative one, so it sees the files as they are all in the document root of xampp.

There is something about "./" meaning the current directory so maybe adding that will make it work locally and if you uploaded it to the server.

claudiu_ceia

First of all, stop including bits of HTML like that. I recently had a project to maintain that did just that and it's hell to work out what the original developer wanted to do. Also, not good practice. You'll either want to create a header and a footer file that you include in each single page, or better go for Smarty or another templating library.

Regarding your files, it's better to go for URLs that start with a slash. The idea is that you'll probably include that code in every page. So taking your version that doesn't start with a forward slash, it works for:

http://example.com/page.html
http://example.com/home

And so on, because it looks for the files starting from the top level directory. As soon as you include that file in pages that are nested deeper:

http://example.com/news/page.html (this would would translate to example.com/news/js/yourscript.js instead example.com/js/yourscript.js)

And so on, it's going to break. What you need to do is use the full path, starting from your web root. Considering a structure like this for your site:

httpdocs
- css
- js
- php
- pages
...

you'd need an URL like /js/whatever.js

This stays consistent no matter what page on your site uses it. Someone also mentioned .htaccess. As long as you keep a full path that actually pointing to a file as shown above, you should be fine.

Also note that this must work both on local server and any other server, this shouldn't in any case be an issue of server configurtation, those are just http requests that you're making. Apache outputs the file as HTML and then the browser makes an http request to the js/css that you're including.

Hope that that makes sense for you.

DonkeyStyle \o/

Afaik it's a Linux thing, saying /blah is like c:\blah only in this case you're talking about the web-root.
If you're running it out of something like http://localhost/example.com/ rather than straight out of http://localhost/ then the files aren't going to be in the same place relative to the site root.

If you want to keep using this kind of path, I'd recommend you either shift projects in and out of the base of webroot/ as needed or set up a virtualhost in apache so you can have multiple localhost roots. (site1.localhost / site2.localhost / etc.)

This sort of thing...
http://apptools.com/phptools/virtualhost.php (don't know how current this article is, but it's roughly the same process)

Nulty

I would have guessed that the local root is set to "http://localhost" without a "/" on the end and thats why it works there but on the remote it implies the "/" and so you end up with "http://www.blah.com//css/screen.css" (two forward slashes)

Thats my 2 cents but that would affect the rest of your relative paths on your site.

These other guys and gals probably know more than me tho.

tehjimmeh

Simple way to check what's happening would be to throw a

<a href="/css/screen.css">TEST</a>

into the page, hover your mouse over the link in your browser and see what path it's resolving to.

Webmonkey

I'm guessing....

On your local machine, your site is probably not at the root...

www/mysite/css/screen.css -> http://localhost/mysite/css/screen.css

On your live server
www/mydomain/css/screen.css -> http://www.mydomain.com/css/screen.css

In the local case, /css/screen.css would point to http://localhost/css/screen.css (won't work)
In the live case, /css/screen.css would point to http://www.mydomain.com/css/screen.css which would work since your site is at the root (/).

Dave!

Thanks for the suggestions lads Didn't really figure it out, I just changed the URLs temporarily and changed them back when I put it live. Didn't really have time to explore it fully, but I'll have a few ideas for next time at least

Cheers

seamus

Yeah, it's an old UNIX thing.

On the web a plain old "/" means "webroot". If my link is href="/", then I'm actually linking to "http://www.mydomain.com/"

So if I'm in mydomain.com/rand/page.html and I link to "/otherpage.html", that's a link to mydomain.com/otherpage.html.

If I link to "otherpage.html", that's a link to mydomain.com/rand/otherpage.html. Note that this is identical to "./otherpage.html".

Dave, in your case on your testing rig, the path to the file was probably something like:

http://localhost/sites/somesite/index.html

In this case, if "index.html" contains a link to "/js/script.js", then the browser is going to try to retrieve

http://localhost/js/script.js

When you remove the leading slash, that changes the links so that it's now

http://localhost/sites/somesite/js/script.js

The rule is that if an href has a leading forward slash, then it's an absolute link, pointing directly at the file. If it contains no leading slash (or ./ or ../), then it's a relative link.

For absolute links to work, you need to duplicate your live site as close as possible. Generally this is done using virtual hosts so that you set up a website on your machine called something like www.mydomain.xom and when you open that in your browser, it redirects you back to your local web server.
If you use relative links everywhere, then you don't need to worry about duplicating your live environment quite so much.