How to redirect to style sheet after switching domain names?

Question

We have switched domain names from example.com to example.org . I have set up a general 301 redirect for all of the site URLs in the .htaccess file on the example.com server and all the pages are redirecting fine.

However, the link to the style sheet on hundreds of old pages is not redirecting so the pages are showing up with no CSS formatting.

Here is the the code in the header of each page linking to the style sheet.

<link rel="stylesheet" href="http://www.example.com/amazon/styles-site.css" type="text/css" />

If you paste http://www.example.com/amazon/styles-site.css into a browser it redirects to the proper URL https://example.org/amazon/styles-site.css.

What do I need to do to get the old styles-site.css URL to redirect to the new url?

Thanks for any information you can provide.

The .htaccess file on the example.com server has the following redirect, which seems to be working for everything except for the .css file mentioned above.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_HOST} ^example.com$ [OR]
  RewriteCond %{HTTP_HOST} ^www.example.com$
  RewriteRule (.*)$ https://example.org/$1 [R=301,L]
</IfModule>

Answer 1

<link rel="stylesheet" href="http://www.example.com/amazon/styles-site.css" type="text/css" />

The problem will be that you are linking to an HTTP (non-encrypted) resource from an HTTPS (encrypted) page. When viewing the HTTPS page (possibly after an initial redirect) then the browser will block any requests for HTTP resources in order to protect the user against potentially disclosing personal information over a non-encrypted channel. Consequently, the request for the insecure (HTTP) CSS file is never made and the redirect is never triggered.

This should be evident if you view the network traffic in the browser.

The only way to resolve this is to convert the hardcoded URLs in the HTML source to use HTTPS instead of HTTP (or remove the protocol altogether and use protocol-relative URLs, eg. //www.example.com/amazon/styles-site.css). But if you are going to do that then you might as well change the domain name at the same time (or remove it altogether and just use a root-relative URL, eg. /amazon/styles-site.css).

all of the hundreds of other pages do not load the css file

Most code editors are capable of doing global search/replace on multiple files. In this case, even just searching for the literal text "http://www.example.com" may be sufficient?

Quick tests to prove the point...

• change your redirect to use http:// instead and request the page over HTTP. Use a temporary 302 redirect and clear your browser cache. The CSS file request should be redirected.
• change the href to be protocol-relative (as noted above). The CSS file should be redirected.

However, even if the redirect did "work", it's only a temporary hack, not a long term solution. You're potentially doubling up the requests hitting your server (if you have many unique visitors) which pollutes your access log with 301s and potentially slows the user experience.