mod_rewrite with Trailing Slash breaks CSS/IMG/SCRIPTS paths

Question

I'm trying to make mod_rewrite the first sub-directory string from url in order to create similar functionality as 'jsfiddle.net saved url's within a class/db. The script works fine and does the rewrite.

e.g. of url

http://jsfiddle.net/RyEue/

This works fine (loads all css, scripts, etc.):

http://www.domain.com/787HHJ2

This is what I've used in the past which does the trick.

The problem Is when ending URL with last slash, script, css and others loose path.

http://www.domain.com/787HHJ2/

rewrite script:

DirectoryIndex index.php index.html
Options +FollowSymlinks
RewriteEngine On # Turn on the rewriting engine
#RewriteBase   /
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{QUERY_STRING} !.
RewriteRule ^.+/?$ index.php [QSA,L]

Unsure if this has to do with Rewritebase, I've tried multiple ways.

PS. I've tried setting paths to absolute (e.g. src="/img/theimage.jpg") without luck.

Answer 1

1. Make sure you have css/images/js etc linked relative to root folder (with leading slash): /styles/main.css

2. Add one of these ruls before current one:

# do not touch files with .css/.js/.jpg etc extensions
RewriteRule \.(css|js|jpg|png|gif)$ - [L]

or

# do not touch any resources in images/css/js folders
RewriteRule ^(images|css|js)/ - [L]

3. Clear browser caches and restart (sometimes browser may display cached page/resource when rewrite rule was fixed which brings a lot of confusion).