.htaccess breaks CSS and Javascript when query-string is passed

Question

I have a problem with my .htaccess file. This is my site structure

/root
   /SubFolder/  # I'm working on this one
      .htaccess
      index.php
      news.php
      /css/
         normalize.css
         main.css
      /js/
         scripts.js
      /admin/
         news.php
         add.php
         edit.php

Everything works fine except when I try to access the following url: edit/2 ( this wold be the same as edit.php?id=2 ) in the admin directory which is in the SubDirectory.

This is my .htaccess file

# ##############################################################################
# # URL REWRITES                                                               #
# ##############################################################################
<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /SubFolder
    SetEnv WROOT /var/www/vhosts/website.com/httpdocs/SubFolder/
</IfModule>

# ------------------------------------------------------------------------------
# | Custom error messages / pages                                              |
# ------------------------------------------------------------------------------
ErrorDocument 404 /SubFolder/template/404.php

# ------------------------------------------------------------------------------
# | Removing the "www." at the beginning of URLs                  |
# ------------------------------------------------------------------------------
# Uncomment on live website
#<IfModule mod_rewrite.c>
#   RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
#   RewriteCond %{HTTPS}s ^on(s)|
#   RewriteRule ^ http%2://%1%{REQUEST_URI} [L,R=301]
#</IfModule>


# ------------------------------------------------------------------------------
# | Remove the slash                                                           |
# ------------------------------------------------------------------------------
<IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^([^/]+)/$ $1 [R=301,L]
</IfModule>


# ------------------------------------------------------------------------------
# | Redirect to extensionless url                                              |
# ------------------------------------------------------------------------------
<IfModule mod_rewrite.c>
    RewriteCond %{THE_REQUEST} ^(.+)\.php([#?][^\ ]*)?\ HTTP/
    RewriteRule ^(.+)\.php$ $1 [R=301,L]
</IfModule>


# ------------------------------------------------------------------------------
# | Pretty urls                                                                |
# ------------------------------------------------------------------------------

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule .* - [L]
RewriteRule ^edit/([0-9]+)$ edit.php?id=$1 [L]

<IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME}\.php -f
    RewriteRule ^(.*)$ $1.php [L]
</IfModule>

When I try to go to edit/2 in the admin directory, my styles, images and scripts paths are all broken. In fact the included path in the chrome console shows http://website.com/SubFolder/admin/css/style.css instead of http://website.com/SubFolder/css/style.css. If i go to a normal page without query-strings, in either the SubDirectory or the SubDirectory/admin/ folder, my styles are loaded correctly.

Just for the record, this is how I include <link> and <script> in the admin directory: <link rel="stylesheet" href="../css/normalize.css">

I tried to change the RewriteBase to just / and /SubFolder/admin but then all of my pages have broken paths.

I also tried to add <base href="/admin/"> but still broken paths.

Any suggestions or help of how can I fix this ?

Thank you in advance.

anubhava · Accepted Answer · 2014-02-07 05:22:52Z

4

You can try one the 2 ways to fix this:

Use absolute path in your css, js, images files rather than a relative one. Which means you have to make sure path of these files start either with http:// or a slash /. So your css links should be like this for example:
```
<link rel="stylesheet" href="/SubFolder/admin/css/style.css">
```
If switching to absolute links is not an option then try inserting this rule as your very first rule in your current .htaccess:
```
RewriteRule /((?:css|js|images)/.+)$ $1 [L,NC,R=301]
```

edited Feb 7, 2014 at 5:22

answered Feb 7, 2014 at 5:04

anubhava

790k67 gold badges603 silver badges671 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

C. Ovidiu Over a year ago

Unfortunately the 2nd method does not work, I get a 500 error and I cannot see the error log. I think I might use the absolute path even if to me it does not seem a very nice fix. Just so I can make myself clear, the admin/ folder is a 'sub-subfolder' of the root, the .htaccess is in the subfolder and the admin/ only has the pages, all the css, javascript and images are in the subfolder. The strange thing is that only when I use a query-string (admin/edit/2) this happens, normal pages (admin/news, admin/add) work just fine and also page.php?id=2. Thank you anyway

anubhava Over a year ago

Yes that is due to another layer of directory that gets added by admin/edit/2 since for relative URI structure you have ../css/... it changes the context. Also note that for pretty URI scheme best option is to always use absolute URLs for css/js/images. I will try to tweak rewrite rule one more time but absolute URL is recommended option.

C. Ovidiu Over a year ago

Still no luck, I'll go with the absolute path. One last question though, would it harm to put another .htaccess file in admin/, completely ignoring the one in the subfolder and write all the rules again specifically for the admin/ folder only ?

anubhava Over a year ago

Sure that will be clean but isn't admin a sub directory under SubFolder/?

C. Ovidiu Over a year ago

Sorry for replying this late. Yes it is, are you saying that I will have the same problem ?

|

Jon Lin · Accepted Answer · 2014-02-07 03:33:19Z

0

You don't want to add <base href="/admin/">, you want to add <base href="/Subfolder/">

answered Feb 7, 2014 at 3:33

Jon Lin

144k29 gold badges226 silver badges224 bronze badges

1 Comment

C. Ovidiu Over a year ago

Just tried this but the paths are still incorrect. This time it shows website.com/css/style.css The SubFolder disappears completely from the path.

Collectives™ on Stack Overflow

.htaccess breaks CSS and Javascript when query-string is passed

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related