CSS doesn't work on HTTPS pages in Chrome and

Question

On my site, Chrome can't load a stylesheet if the page is opened with https.

For instance, on the page test.php I have the following CSS include:

<link href="http://www.domain.com/css/mainstyle.css" rel="stylesheet" type="text/css">

It uses the absolute path because there's a lot of SEO, subdirectories etc, so it's much easier to include it like this than by looking for relative paths.

If I open the page as http://www.domain.com/test.php it works fine, but if I open it as https://www.domain.com/test.php Chrome refuses to load the stylesheet!

It works in Firefox and Safari. I can understand IE being a 'special needs' browser, but why is Chrome doing this and how can I fix it?

Calling the CSS file with https://domain.com/css/mainstyle.css fixes the issue, but is it really necessary?

Answer 1

You need to allow .css, .js, .png, .jpg, .bmp, .gif, .eof, .ttf, .svg files in .htaccess file for https page.

For security purpose Chrome not allowed these files on these pages. BUT Firefox allowed.

Answer 2

Maybe try Protocol Relative URLs :

< link href="//www.domain.com/css/mainstyle.css" rel="stylesheet" type="text/css" >

The Protocol-relative URL - Paul Irish

Hope it can help!