Missing CSS File and Images After Url Rewrite

URL rewrite in htaccess results is missing CSS and images

RewriteRule index.php?url=$1 [QSA, L]

I think you have a couple of glaring typos(?) in your question that make this directive completely invalid... you are missing a RewriteRule pattern, so this won't actually match anything and the erroneous space in the flags argument is syntactically invalid, resulting in a 500 Internal Server Error response?!

The RewriteRule directive should be written like:

RewriteRule ^([\w/-]+)$ index.php?url=$1 [QSA,L]

^([\w/-]+)$ matches a URL-path containing any of the characters: a-z, A-Z, 0-9, _ (underscore), / (slash) and - (hyphen). I've excluded the dot, which is naturally part of real filenames.

You should also ensure that MultiViews is disabled, so that mod_negotiation doesn't rewrite the request before mod_rwrite - since your "extensionless" requests appear to map directly to filenames. eg. /user maps to /user.php. Place the following at the top of your .htaccess file:

Options -MultiViews

But when I was given a slash to my URL it stops showing CSS or other IMG directories.

This isn't a problem with .htaccess, but is caused by using relative client-side URLs to your static resources. When you request the URL /user/anonymous then the browser will resolve any relative URLs relative to /user/anonymous (not the document root - which is probably what you are expecting). If you have a relative URL to css/styles.css then the browser is naturally going to resolve this to /user/css/styles.css - which probably doesn't exist (and is likely getting rewritten to index.php - but that isn't the issue - the fact that it doesn't exist is the issue).

If you look at the network traffic (HTTP requests) in the browser, it should give you a clue as to what's going on.

You need to change your client-side URLs to use either root-relative (starting with a slash) or absolute (scheme + hostname) URLs to fix this issue.

See my answer to the following question on the Webmasters stack that explains this further:

https://webmasters.stackexchange.com/questions/86450/htaccess-rewrite-url-leads-to-missing-css

URL rewriting : css, js, and images not loading

Don't be lazy and change your relative URIs in your resources to root directory absolute pathing like /css/style.css. This is the best.

You can get clever and use regex and replace all the files you need which would be like a few one liners and you're done. How many places could there be to change? And you should be using a template.

This should work but I wouldn't go this way.

RewriteRule ^detail/(css|js|img)/(.*)?$ /$1/$2 [L,QSA,R=301]

Missing CSS file and images after URL rewrite

For your local version add

<base href="//localhost/mywebsite" />

to the head section

and for your live versions change it to

<base href="//your.domain.here" />

reference at http://www.w3.org/TR/html4/struct/links.html#h-12.4

JS and CSS Rendering Issues After .htaccess File URL Rewrite Rule

The "problem" is that you appear to be using relative URL-paths to your static resources (CSS, JS and images). So this is a client-side URL resolution issue. You should be using root-relative (starting with a slash) or absolute (with scheme + hostname) URLs to your assets so they can be located regardless of URL-path depth. (Note that any requests that your JS makes, eg. AJAX, should also be root-relative or absolute.)

The problem is not so much with .htaccess, but when you change the URL from /post.php?page=page_slug to /post/page_slug then any client-side relative URLs are going to resolve relative to /post/, not / (the document root) as before.

The request for the JS (and CSS) files result in a 404, so the 404 HTML error document is most probably being parsed as JS and failing (ie. "Uncaught SyntaxError: Unexpected token: '<'" - due to a <!DOCTYPE html> or opening <html> tag).

A possible workaround (to avoid changing your URLs) is to use a base HTML element in the head section to indicate what any relative URLs should be resolved relative to, overriding the URL of the current document. However, this has some additional caveats if you are using in-page anchors of the form href="#element" - since they will now be resolved relative to the document stated in the base element and not the current document.

See also my answer to the following question on the Webmasters stack that goes into more detail on this:

https://webmasters.stackexchange.com/questions/86450/htaccess-rewrite-url-leads-to-missing-css

.htaccess url: rewrite missing css javascript and images file at local host Xampp

Your paths for your CSS files are relative. So when you load up http://localhost/www.zeeshan.com/user/zeeshan06, your browser is looking for CSS files in a folder called http://localhost/www.zeeshan.com/user/. You need to change your paths to:

<head>
<link href="/www.zeeshan.com/style.css" rel="stylesheet" type="text/css"/>
<link href="/www.zeeshan.com/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="/www.zeeshan.com/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
</head>

URL rewrite issue not loading .css

one solution is that use absolute path (ex /css, or /js rather than just css/, /js but this is not looks a reliable solution since we've to change it on all files,

This is because your relative URIs have their base changed. Originally, the base is / when the page is /product.php?id=75, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /product/75/any-text-here the base suddenly becomes /product/ and it tries to append that in front of all relative URLs and thus none of them load.

You can either make your links absolute, or change the URI base in the header of your pages (inbetween the <head> </head> tags):

<base href="/">

.htaccess RewriteRule also rewriting my css, js and images files. how to ignore these?

You can use that:

RewriteEngine on
# not rewrite css, js and images
RewriteCond %{REQUEST_URI} !\.(?:css|js|jpe?g|gif|png)$ [NC]
RewriteRule ^abc/(.+)/(.+)/ abc.php?id=$1&name=$2 [L]

# rewrite css, js and images, from root
RewriteRule ^abc/[^/]+/[^/]+/(.+)$ $1  [L]

If your final css (or js) directory is not at root, you can add the path before the last $1. Now it's: /css/style.css with /abc/xxx/yyy/css/style.css

IIS Rewrite even rewrites images/css/js - results in 404 not found

After several hours & days I finally found the correct IIS rewrite rule to be used for bypassing images/css/js etc files so that the page appear correctly.

The following rewrite rules must be added to your ASP.Net MVC project's Web.Config.

<!--Rewrite all paths containing a period like www.conceptworld.com/qa/453/who-am-i/qa-images/search.png to  www.conceptworld.com/qa/qa-images/search.png -->

<rule name="RewriteFileUrls" stopProcessing="true">
          <match url="^qa\/([^\/]*)\/([^\/]*)\/(.*[\.].*)$" ignoreCase="true" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="true" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="true" negate="true" />
          </conditions>
          <action type="Rewrite" url="qa/{R:2}/{R:3}" appendQueryString="false" />
        </rule>

I am using the above rule plus the below 2 rules for the Question2Answer Question Answer PHP based solution similar to StackOverflow. I have installed Question2Answer on a Windows system with IIS + Asp.Net MVC.

<!--Rewrites urls like www.conceptworld.com/qa/tags -->

<rule name="RewriteSingleLevelUrls" stopProcessing="true">
          <match url="^qa\/([^\/]*)$" ignoreCase="true" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="true" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="true" negate="true" />
          </conditions>
          <action type="Rewrite" url="qa/?qa={R:1}&{QUERY_STRING}" appendQueryString="false" />
        </rule>

<!--Rewrites urls like www.conceptworld.com/qa/56/who-am-i -->
        <rule name="RewriteTwoLevelUrls" stopProcessing="true">
          <match url="^qa\/([^\/]*\/[^\/]*)$" ignoreCase="true" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="true" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="true" negate="true" />
          </conditions>
          <action type="Rewrite" url="qa/?qa={R:1}&{QUERY_STRING}" appendQueryString="false" />
        </rule>

Just setting the above rules is not enough. What is most important is setting your base url in Question2Answer. I almost gave up and thought it was impossible to have pretty SEO friendly urls in Question2Answer when it is installed on Windows (IIS + Asp.Net MVC), until I discovered this setting. Thanks to Question2Answer developers :)

Go to Admin/Layout and set the base url like below:

Question2Answer - Admin/Layout Page

Now you are all set to run Question2Answer along with IIS Asp.Net MVC.