URL with trailing slash breaks layout - how can I fix this without using base tag?

Question

I am developing a website, and I have set up the following htaccess rules

RewriteEngine On
#RewriteRule ^([0-9]+)?$ index.php?page=$1
#RewriteRule ^([0-9]+)/([0-9]+)?$ index.php?page=$1&post=$2
RewriteRule ^([A-Za-z0-9-]+)?$ index.php?pagename=$1
RewriteRule ^([A-Za-z0-9-]+)/([A-Za-z0-9-]+)?$ index.php?pagename=$1&post=$2

This ensures that instead of http://www.mysite.com/index.php?page=2 showing the page

I get to use the friendlier method of http://www.mysite.com/about-us

* note I have not included a trailing slash.

In the page my css files are included as:

<link href="css/style.css" rel="stylesheet" type="text/css" />

and located at www.mysite.com/css/style.css

And this works well, however if I want to include a trailing slash (i.e. http://www.mysite.com/about-us/)

Then my css files do not load and I get an error where the Firefox source browser says:

The requested URL http://www.mysite.com/about-us/css/style.css was not found on this server.

This is because the page is determining about-us to be a directory instead of a page.

I am not keen to use the basehref tag like <base href="http://www.mysite.com/" />

Are there any other options?

Answer 1

Relative URLs are resolved from a base URL that is the URL of the document the relative URL is used in if not specified otherwise.

Now to fix this incorrect reference, you have two options:

• change the base URL using the BASE element,
• change the reference
  • by adjusting the relative URL path to the base URL path, or
  • by using just an absolute URL path, or
  • by using an absolute URL.

Since you don’t want to use the BASE element, you will probably need to adjust the URL you are using to reference the external resource.

The simplest would be to use the absolute URL path /css/style.css instead so that it is independent from the actual base URL path.