I am using MOD_REWRITE to channel all URLs through a single file. The aim is to allow pretty urls like:
http://mysite.com/shop/electrical/hoover
or
http://mysite.com/shop/checkout
etc etc
I achieve this using the following .htaccess file:
# Turn on the RewriteEngine
RewriteEngine On
#
# Rules
#
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . urlbug.htm
This is the stripped down HTML file that does all the work:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>My web page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.20.custom.css" media="all" rel="stylesheet"/>
</head>
<body>
<div id="accordion"><h3><a href="#">Home</a></h3><div>
<ul class="submenu"><li><a href="#" title="Clear Counters">Clear Counters</a></li></ul>
</div>
<h3><a href="#">Maintan Tables</a></h3>
<div>
<ul class="submenu">
<li><a href="#" title="Stock">Stock</a></li>
<li><a href="#" title="Categories">Categories</a></li>
<li><a href="#" title="Designers">Designers</a></li>
</ul>
</div>
<h3><a href="#">User Database</a></h3><div><ul class="submenu"></ul></div>
</div>
<script src="js/libs/jquery-1.7.1.min.js"></script>
<script src="js/libs/jquery-ui-1.8.20.custom.min.js"></script>
<script src="js/plugins.js"></script>
</body></html>
This works if you visit a URL like:
http://www.facebookanswers.co.uk/code/foobar/works
However, if you try a URL like:
http://www.facebookanswers.co.uk/code/foobar/no/longer/works
Then the URL will load, however, none of the CSS or JS files will load.
This is because I am using relative URLs.
If I instead use absolute URLs, then all works fine. I have set up a different folder to demonstrate this:
http://www.facebookanswers.co.uk/code/foobar2/works
and
http://www.facebookanswers.co.uk/code/foobar2/works/as/well
This is the code with the absolute URLs:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>My web page</title>
<link type="text/css" href="http://www.facebookanswers.co.uk/code/foobar2/css/ui-lightness/jquery-ui-1.8.20.custom.css" media="all" rel="stylesheet"/>
</head>
<body>
<div id="accordion"><h3><a href="#">Home</a></h3><div>
<ul class="submenu"><li><a href="#" title="Clear Counters">Clear Counters</a></li></ul>
</div>
<h3><a href="#">Maintan Tables</a></h3>
<div>
<ul class="submenu">
<li><a href="#" title="Stock">Stock</a></li>
<li><a href="#" title="Categories">Categories</a></li>
<li><a href="#" title="Designers">Designers</a></li>
</ul>
</div>
<h3><a href="#">User Database</a></h3><div><ul class="submenu"></ul></div>
</div>
<script src="http://www.facebookanswers.co.uk/code/foobar2/js/libs/jquery-1.7.1.min.js"></script>
<script src="http://www.facebookanswers.co.uk/code/foobar2/js/libs/jquery-ui-1.8.20.custom.min.js"></script>
<script src="http://www.facebookanswers.co.uk/code/foobar2/js/plugins.js"></script>
</body>
</html>
Somewhere along the line, the path is getting confused. What is the best way around this? I would like to keep relative URLs if possible, as the code I am developing will be used on a number of sites. Its not the end of the world if I have to use absolute URLs, and I know that there are performance benefits in absolute URLs, but it seems odd that the browser will happily load the URL, but then think that it is stored somewhere else!
Use root relative URLs.
The problem is that the browser sees a URL like http://www.facebookanswers.co.uk/code/foobar/no/longer/works so a relative link would resolve as http://www.facebookanswers.co.uk/code/foobar/no/longer/works/code/foobar2/css… and so on.
Instead use this…
By starting with a / you’re forcing it to be relative to the root of the website, but by not specifying the domain, it’ll work just fine if you deploy on another site. This is really just an HTML issue rather than a mod-rewrite one.
Take a look at your server access logs and you’ll see what pages are being requested, and you’ll see they’re not what you were expecting.
Site-wide resources are always best referred to with root-relative URLs – it means you don’t need to adjust them based on where you are in the site, and it makes them portable between sites (which is handy if, like me you have your development site on a local machine with a different domain name – I use http://www.example.com.dev when working locally on http://www.example.com)