CODEWITHSUNDEEP
htmlcss.htaccessmod-rewrite
algorithmicCoder
algorithmicCoder

Reputation: 6789

CSS not loading after redirect with htaccess rewrite rule

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!

Upvotes: 22

Views: 57552

Answers (13)

Abdul Rahman
Abdul Rahman

Reputation: 1

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>

Upvotes: 0

anubhava
anubhava

Reputation: 785156

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:

  1. 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 /.

  2. 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.

Upvotes: 14

anesupaul-developer
anesupaul-developer

Reputation: 91

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/

Upvotes: 1

Thanh Siel
Thanh Siel

Reputation: 31

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>

Upvotes: 3

vitoold2078
vitoold2078

Reputation: 436

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.

Upvotes: 7

Ahmad Lone
Ahmad Lone

Reputation: 1

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

<base href="website url here">

Upvotes: 0

84bb84
84bb84

Reputation: 3

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]

Upvotes: -1

razz
razz

Reputation: 10110

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

Upvotes: 1

John McMillan
John McMillan

Reputation: 39

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.

Upvotes: 0

Vijay Kumar Kanta
Vijay Kumar Kanta

Reputation: 1131

RewriteCond %{REQUEST_FILENAME} !-f

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

Upvotes: 1

Query
Query

Reputation: 719

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.

Upvotes: 20

Chamika Sandamal
Chamika Sandamal

Reputation: 24312

link the css files relative to the root directory sample:

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

Upvotes: 16

Steve Lewis
Steve Lewis

Reputation: 1302

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.

Upvotes: 32

Related Questions