CSS not loading after redirect with htaccess rewrite rule

Question

I have the following Short-hand for a user profile url

RewriteRule ^(\w+)/?$ ./profile.php?name_of_user=$1

The site is styled with the appropriate css file when i do site.com/name_of_user

but not when i do site.com/name_of_user/

Although the redirect is to the right page...

Help is appreciated!

It's hard to tell what your problem is when you haven't showed us the actual HTML that calls your CSS, but I suspect it's because you're referring to the directory incorrectly in your `` tag. — Josh Leitzel, Nov 22 '11 at 01:57

score 32 · Answer 1 · answered Nov 22 '11 at 01:56

32

the easiest way to fix this is to specify the full path to your CSS file in the <head> of the HTML file.

If your mod_rewrite rule is modifying the path to where your CSS file is, you'd also want to place this before your RewriteRule:

RewriteCond %{REQUEST_FILENAME} !-f

This makes sure that the request doesn't match a file before rewriting it.

answered Nov 22 '11 at 01:56

Steve Lewis

1,302
7
8

1

+1 not only the easiest way but that also fix nested sub folders – Book Of Zeus Nov 22 '11 at 02:00
this fixed the issue with my javascript files as well! – JJJ Oct 18 '18 at 02:29
This worked. Thanks. And my issue may help someone else: I was redirecting from one location to another (without rewriting the url), and assuming I was at the new location when I was still at the old location. The access to the .css file had to work in the old location (and the new location too, in my circumstance). – Xonatron Feb 15 '20 at 16:12
i added this but it is still not loading my css.. why is that? – Jun 30 '20 at 10:06

score 20 · Answer 2 · answered Nov 23 '12 at 05:13

20

I had this same problem and have found the easiest and most practical solution.

<base href="http://www.example.com/" />

It's super clean and easy to use.

answered Nov 23 '12 at 05:13

Query

720
2
7
23

score 15 · Answer 3 · answered Nov 22 '11 at 04:26

15

link the css files relative to the root directory sample:

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

answered Nov 22 '11 at 04:26

Chamika Sandamal

23,565
5
63
86

I have tried this which is working for me http://www.chatfitness.com/ didn't check answer2 – Mo. Jan 27 '12 at 12:04
3

same issue as OP; (styles were working on "site.com/aaa", but not working on "site.com/aaa/bbb"); had to change `href="css/***.css` to `href=/css/***.css`. Thanks! – P Marecki Aug 14 '13 at 19:22

score 14 · Answer 4 · answered Aug 09 '17 at 19:52

When your page URL is example.com/name_of_user/, loading of resource css/js/images may cause problems if your HTML page is using relative paths for these resources. It is because browser resolves resource URLs using current URL.

So for example if a style tag is:

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

and your current page URL is:

http://example.com/name_of_user/

Then browser will resolve css URL as as example.com/name_of_user/static/style.css instead of example.com/static/style.css. This will cause 404 for resource URLs and your page will be displayed without any style, scripts and images.

You can solve this problem using one of the following ways:

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 /.
Otherwise You can add this just below <head> section of your page's HTML:
```
<base href="/" />
```

so that every relative URL is resolved from that base URL and not from the current page's URL.

uxmal · Answer 5 · 2016-09-30T06:47:18.750

Try to set right basedir at your html documents head section:

<head>
  <base href="http://example.com/">
<head>

Then any extra slashes (/) at your .htaccess rules won't change exterial sources path in your html documents. The following rule

RewriteEngine On
RewriteBase /
RewriteRule ^(\w+)/?$ ./profile.php?name_of_user=$1

won't make this behaviour with <base href="http://example.com/"> at document's <head>. It will works fine, especially for relative site file structures.

score 3 · Answer 6 · edited Nov 26 '16 at 04:55

3

Try this:

<IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)\.(gif|jpg|png|jpeg|css|js|swf)$ /public/$1.$2 [L,NC]

    # Removes index.php from ExpressionEngine URLs  
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ /index.php/$1 [L,QSA]

</IfModule>

edited Nov 26 '16 at 04:55

Pang

9,564
146
81
122

answered Oct 30 '15 at 07:31

Thanh Siel

31
1

This worked perfectly, after changing the directory names as needed. Guess the only downside would be maintaining a whitelist for the first rule. Maybe using a blacklist might be a better solution in case of media/different types of files. – Akhil Gupta Feb 24 '19 at 19:17
This is the best answer I could find anywhere on the web. Thank you for being so specific! – b3tac0d3 Oct 27 '22 at 00:45

score 1 · Answer 7 · answered Jan 18 '13 at 08:18

1

RewriteCond %{REQUEST_FILENAME} !-f

This works like a treat. I originally had problem even with giving absolute linking. Thanks and +1 to Steve Lewis.

answered Jan 18 '13 at 08:18

Vijay Kumar Kanta

1,111
1
15
25

score 1 · Answer 8 · answered Apr 29 '14 at 22:54

When you use this site.com/name_of_user/ you change the working directory on your site from root to name_of_user, therefore the relative path for each file or link on the requested page would become /name_of_user/ instead of /.

To fix this you need to add additional rule to .htaccess:

RewriteRule ^name_of_user/(.*)?$ $1

score 1 · Answer 9 · edited Jun 12 '17 at 18:45

1

The easiest way is to use <base href="site url here">, and this should be soon after the opening HTML head tag. Site url needs to start with http or https; if you are on localhost then use http, for example

http://localhost/road/

edited Jun 12 '17 at 18:45

Paul Roub

36,322
27
84
93

answered Jun 12 '17 at 14:22

anesupaul-developer

81
2

score 0 · Answer 10 · answered Mar 25 '14 at 16:46

I've had what seems to be the same problem. I was trying to redirect from a site of the form: www.foo/category/details.

I found the slash after "category" stopped both the CSS and images from being loaded.

The cause is the default redirection passes the original URL to the browser. This can be seen from a JScript trace on window.location.pathname. The solution is simply to use a [R] flag in the rewrite rule.

score 0 · Answer 11 · edited Jun 18 '16 at 11:05

0

Simply add the base path after the opening head tag. For example:

<base href="website url here">

edited Jun 18 '16 at 11:05

Pang

9,564
146
81
122

answered Jun 18 '16 at 10:56

Ahmad Lone

1
1

score 0 · Answer 12 · answered Dec 25 '21 at 03:36

0

Best and Simple way only add this tag in your redirected file's top of header and chill all will be right!

<head>
   <base href="website url here">
</head>

answered Dec 25 '21 at 03:36

Abdul Rahman

1
1

score -1 · Answer 13 · edited Nov 18 '15 at 09:51

-1

I had the same problem and I've solved it with the following code. Not the best solution but it works.

RewriteRule ^(something/)$ something [R] 
RewriteRule ^(something)$ index.php?page=$1 [L]

edited Nov 18 '15 at 09:51

Luís Cruz

14,780
16
68
100

answered Nov 18 '15 at 09:28

84bb84

3
1

CSS not loading after redirect with htaccess rewrite rule

13 Answers13

Linked

Related