422,026 Members | 1,149 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 422,026 IT Pros & Developers. It's quick & easy.

External CSS is working on localhost but not working on online server

P: 5
I created a website. And the external stylesheet which I have linked to it is working perfectly on my system localhost. But when I upload it to the online server, it doesn't working. Because of this I have to add internal stylesheet which is waste of memory and execution time. I don't know what is the problem, the code is perfectly allright. I don't know how to fix this problem.
Here's the css link to my website:-

Expand|Select|Wrap|Line Numbers
  1. <meta charset="UTF-8">
  2.         <meta name="viewport" content="width=device-width" />
  3.         <link rel="icon" href="icon.png" type="image/png">
  4.         <link rel="stylesheet" type="text/css" href="style.css"/>
  5.         <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Jan 4 '18 #1

✓ answered by GazMathias

Yet another approach is to use protocol relative URL references whereby you drop the protocol from the link entirely:

<link href="//fonts.googleapis...

The browser will then use the protocol that was used to load your page from your server to request the external resource.

It is useful if you happen to add a certificate later or change from a development to live scenario as you don't have to change anything.

Gaz

Share this Question
Share on Google+
12 Replies


Expert 100+
P: 875
The problem is probably mixing HTTP and HTTPS.
Make sure that if your page is HTTP, the stylesheet is also HTTP.

Secure websites are not allowed to mix protocols. Everything has to be embedded from a secure server. Browsers will ignore/block HTTP resources on HTTPS pages (with varying degree of strictness).
Jan 6 '18 #2

P: 5
Thank you fro your kind response. Can you please explain how to do this....
Jan 17 '18 #3

Expert 100+
P: 875
First we have to know how you are going to your webpage, do you use HTTPS? of HTTP.

My guess is you use HTTTP.
If that is true, than change line #5 from 'https://...' to 'http://...'

Normally you should not do that (just change HTTP to HTTPS or the other way around), but this page is also reachable via HTTP, which you can check by typing this address in the address bar of a browser. then browser will respond with a download, and not give an error 404, which means the page exists.
Jan 17 '18 #4

100+
P: 292
Another approach to address this problem is to download the external css and then refer it with href.

Please let us know if this won't help.
Jan 19 '18 #5

GazMathias
Expert 100+
P: 189
Yet another approach is to use protocol relative URL references whereby you drop the protocol from the link entirely:

<link href="//fonts.googleapis...

The browser will then use the protocol that was used to load your page from your server to request the external resource.

It is useful if you happen to add a certificate later or change from a development to live scenario as you don't have to change anything.

Gaz
Jan 19 '18 #6

Expert 100+
P: 875
But in the question was:
"Because of this I have to add internal stylesheet which is waste of memory and execution time."

How much time and memory will be wasted by putting this stylesheet locally?
Jan 20 '18 #7

GazMathias
Expert 100+
P: 189
Indeed.

Might I also suggest that the OP learn to use the developer console of their chosen browser as no doubt it would have indicated the mixed mode failure and is an invaluable tool regardless.

Gaz
4 Weeks Ago #8

P: 5
but that link is provided by google fonts to import external fonts from google. If we remove the protocol from that link, then will it work properly?
4 Weeks Ago #9

GazMathias
Expert 100+
P: 189
Yes,

It is in the specification, which describes the mechanism browsers should use to fill in the blanks at the start of URLs to save developers retyping the full URL of every resource.

For example you may set an image URL to 'assets/images/someimage.jpg' but the browser will send the request for it to 'http://www.yoursite.com/assets/images/someimage.jpg' because the browser fills in the 'http://www.yoursite.com/' automatically.

However, where possible it's best to use HTTPS everywhere when live.

Gaz
4 Weeks Ago #10

P: 5
yeah I think this might be helpful to me. I should try it once.
Thank you
4 Weeks Ago #11

P: 2
totally agree with Luuk
2 Weeks Ago #12

P: 1
Usually this is cache related. Try doing a hard refresh -- CTRL Shift R. Also, if you are using apache2, use the "-i" option. Files are not updating because they are cached. And if you cannot do this, change the href="styles.css" into href="styles.css?v=version2" (that's worked like a charm for my website when I faced the same issue). It would make the server think there is a new file, so then it updates the cache. Or you can always delete the old one and upload the new on.
1 Week Ago #13

Post your reply

Sign in to post your reply or Sign up for a free account.