htaccess: how to remove file extesion, add trailing slash, and possibly keep the style?

Question

I was trying to mask the file extension of html and shtml files with htaccess. I don't know much about htaccess, and what I managed to do is remove the extension, add the trailing slash to shtml pages, and stop there. I wanted to add the trailing slash to html files as well, but my research on the topic brought me nowhere. It looks like I either generate a url with two slashes, or a url with fake directory, slash, and file extension, or lose the style of the page, for some strange reason.

I have tried basically everything I know. Here's what I have:

#this redirects idex.html to http://mysite.com

RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.html\ HTTP/
RewriteRule ^index\.html$ http://%{HTTP_HOST}/ [R=301,L]

#remove file extension

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html 

# if I try this (.*)/$ $1.html the page loses its style 

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.shtml -f
RewriteRule ^(.*)/$ $1.shtml 

#the code above for shtml files works properly
#force trailing slash and remove file ext. This produces error


#RewriteCond /%{REQUEST_FILENAME}.html -f
#RewriteRule ^([a-zA-Z0-9_-\s]+)/$ /$1

##the code below is perfect (retrieved on StackExchange)

#RewriteCond %{REQUEST_URI} (.*)/$
#RewriteCond %{REQUEST_FILENAME}\.html -f
#RewriteRule (.*)/$ $1.html [L]


#especially if combined with this, but pages lose their style
#RewriteCond %{REQUEST_FILENAME} !-f
#RewriteCond %{REQUEST_FILENAME}\.html -f 
#RewriteRule .* %{REQUEST_FILENAME}/ [R=301,L]

Is there a way to add a trailing slash and keep the style of the page? I'm sure there's one but I don't seem to be able to find it...Thanks in advance

Answer 1

To keep your styles, either change you links to absolute URI's (they start with a /) or add this to the page header:

<base href="/" />

The reason why you can't get your styles is because the browser appends a URI base to relative URLs. So say the browser loads this page:

http://yourdomain.com/foo/

the rewrite rules will internally rewrite the URI to /foo.html but the browser still thinks it's loading /foo/. The extra slash means the relative URI base is no longer /, but /foo/. So for all relative links, the browser will append /foo/ to the beginning. If you specify that the relative URI base is / then the browser will simply append / (like it does for non-trailing slash pages).