Images & CSS problems when using .htaccess

[Karma]

Hi,

When I'm at the root of my domain, my site works fine but as soon as I click one of my links, all images are lost (stored in /images/, as is the style sheet info (stored in /styles/).

ht tp://www.example site.com/ = works fine
ht tp://www.example site.com/list_a/ = no images etc

Paths are as follows:

<img src="images/mylogo.jpg">
<LINK REL="stylesheet" TYPE="text/css" HREF="styles/v1.css" TITLE="v1">

My .htaccess:

------------------------------------
RewriteEngine on
RewriteRule ^([^_]+)_([^/]+)/([^_]+)_([^/]+)/([^_]+)_([^/]+)/?$ /index.php?$1=$2&$3=$4&$5=$6 [L]
RewriteRule ^([^_]+)_([^/]+)/([^_]+)_([^/]+)/?$ /index.php?$1=$2&$3=$4 [L]
RewriteRule ^([^_]+)_([^/]+)/?$ /index.php?$1=$2 [L]
RewriteRule ^index\.html$ /index.php [L]
------------------------------------

The only way that I can get around this problem is by specifying the url path:

<img src="ht tp://www.example site.com/images/mylogo.jpg">
<LINK REL="stylesheet" TYPE="text/css" HREF="ht tp://www.example site.com/styles/v1.css" TITLE="v1">

I'm not sure quite what the problem is, any ideas?

[BigDogUK]

I'm having the same problem.

I've only just started with htaccess and rewriting but I'm pretty sure the problem is that the relative URL's are pointing to places that don't exist.

ie.

www.examplesite.com/list_a/css/style.css

When it is actually located at:

www.examplesite.com/css/style.css

Can anyone tell me how to add a rewrite so all requests for css and any other folders like javascript are rewritten to the correct location?

[jdMorgan]

The key to understanding the problem is to remember that it is the client (e.g. browser or search engine robot) that resolves relative links. A page-relative link on a page is resolved by stripping the current page name from the current domain/directory/subdirectory/ path in the address bar, and adding the relative link path that you have specified for the image or CSS file. For example:

Current page URL: example.com/my_pages/widgets/green_widgets.html
Image tag on that page: <img src="my_pic.jpg">
Strip off the page name: example.com/my_pages/widgets/green_widgets.html --> example.com/my_pages/widgets/
Add on the image path: example.com/my_pages/widgets/ --> example.com/my_pages/widgets/my_pic.jpg

All of this processing is done client-side by the browser.

So, as you have noted, one way to fix the problem is to use a canonical URL. You can also use a server-relative path, i.e. <img src="/path_to_image_on_server.gif">; The leading slash tells the browser to start with the domain name rather than with the current 'directory' to resolve the relative URL:

Current page URL: example.com/my_pages/widgets/green_widgets.html
Image tag on that page: <img src="/images/widgets/my_pic.jpg">
Strip entire page path: example.com/my_pages/widgets/green_widgets.html --> example.com
Add on the image path: example.com --> example.com/images/widgets/my_pic.jpg

Another solution is to change your rewriterules so that the image/CSS URLs requested by the client are rewritten in a similar manner to the page URLs.

Jim