mod_rewrite not working well with trailing slash & css breaks apart

Question

I have just one root directory with index.php in it along with two folder img and css. I refer to files in this folder like: src="img/path.png" i.e relative to the root directory.

The other day I had some mod_rewrite question & this is what someone gave me, which seems to wrok fine except for trailing slashes and css/img breaking apart

RewriteRule ^$ index.php?page=1 [L]

RewriteRule ^([0-9]+)/?$ index.php?page=$1 [L]

RewriteRule ^([A-Za-z]+)/?$ index.php?category=$1&page=1 [L]

RewriteRule ^([A-Za-z]+)/([0-9]+)/?$ index.php?category=$1&page=$2 [L]

This is what is bothering me:

Using Rule1:

www.example.com changes to www.example.com/index.php?page=1 which is great Also www.example.com/ some how changes to www.example.com which is again great

Using Rule2:

www.example.com/2 changes to www.example.com/index.php?page=2 like what I would want But using www.example.com/2/ (TRAILING SLASH) also retrieves page=2 but somehow the img and css breaks apart. I am guessing the problem is with url being treated as directory structure and then it cant find img and css folder there.

Using Rule 3:

www.example.com/Football changes to www.example.com/index.php?category=Football&page=1 again like what I would want But www.example.com/Football/ (TRAILING SLASH) suffers from the same problem with img and css breaking apart

Using Rule 4:

www.www.example.com/Football/2 even without the trailing slash breaksdown on css and img however the page can retrieve tha page and category correctly.

How do I correct this problem without having to use absolute paths in my html. Please advise on the trailing slash problem as well.

Answer 1

Can you not reference your images/css using relative but starting with a /?

/images/blah.jpg
/css/style.css

Answer 2

You could add a rule like:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond $1 !^(index\.php|images|robots\.txt|favicon.ico)
# Other rules here

The idea is to avoid the rewrite case for an existing file or directory.

Answer 3

With a trailing slash, the path will be interpreted as a directory. Wherever you include images, css files and such you have to change the paths. Say you have images in an img folder, you probably use it in css like:

background: url(img/image.png)...

Change that to :

background: url(/img/image.png) ...

Same goes for everywhere you have images referenced or other paths. Using a path that starts with "/" means that you are searching from the root directory. The rules you're using are the rules that I'm ussually using and didn't have any problems with them. Actually, I find it easier to build my paths with a starting "/".

Just as a last example, if you have: mysite.com/home and you have <img src="img/image.png" /> the image will be searched in mysite.com/img/image.png which is probably what you want.

But if you have mysite.com/home/ and <img src="img/image.png" /> the image must reside in mysite.com/home/img/image.png which is not what you want, thus using <img src="/img/image.png" /> would be the solution for you.