I have a standard page, with the following code on
<head>
<link href="http://path.to/stylsheet.css" rel="stylesheet">
</head>
However when I load the page via https and force https traffic through ReWrite conditions the stylsheet fails to load
Any Ideas?
Thank's in Advance
-C
Access your stylesheet over HTTPs as well.
<link href="https://path.to/stylsheet.css" rel="stylesheet">
All files in a site must be references as https if you intend to use it.
The syntax below allows your stylesheet to be loaded via whatever protocol your site is accessed through (assuming the stylesheet is accessible via http and https:
<link href="//path.to/stylsheet.css" rel="stylesheet" />
Related
I just recently bought a porfolio template and try to install it onto github pages. It will only show the background but there will be no images or text.
Note that your Github Pages site is hosted over https and your template is including plain text http links to resources. You cannot safely load plain text http resources in a secure https connection. You need to fix the error messages such as:
Blocked loading mixed active content http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic”
Note the conversion from http to https in the following links:
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lilita+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
And there's another with the jQuery link:
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
On a related note, your repository is missing the magnifique popup library. You can replace the URL with a link to a CDN. For example, change this line...
<script src="js/jquery.magnific-popup.min.js"></script>
to this line...
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
It's loading your index.html just fine, the problem is that your webpage is loading resources over insecure http when github defaults to using secure https, this results in mixed content errors so a bunch of other resources are failing to load.
I recently added SSL to my website but it keeps giving me the error:
Mixed Content: The page at 'https://youtubehulp.nl/comingsoon/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic'. This request has been blocked; the content must be served over HTTPS.
While the link to the fontsheet is https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic
I also tried downloading the file and then loading the local version but that didn't work either.
Tried code:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="font.css">
#import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");
Also made sure all links in the font file are HTTPS
I hope someone can help me with this.
You have a simple typo in your stylesheet https://youtubehulp.nl/comingsoon/css/style.css:
#import url("https//fonts.googleapis.com/css?family=…");
^^
The : is missing after the protocol name. Therefor, it is a relative URL, and when the browser makes an absolute URL out of that using the current URL, the result naturally is https://youtubehulp.nl/comingsoon/css/https//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic
And requesting that URL makes your server issue a redirect to http://www.youtubehulp.nl/comingsoon – and that is the origin of the mixed content warning.
On our website we have some secure and unsecure pages. Should we always link images, css etc using the full https:// or how safe is it to link everything using // ?
Example 1:
<link href="https://www.domain.com/style.css" rel="stylesheet" type="text/css" />
Example 2:
<link href="//www.domain.com/style.css" rel="stylesheet" type="text/css" />
To ensure all traffic is encrypted, use https just to be safe. It can't hurt; it can only make your traffic more secure.
I am trying to use Google fonts in this website. The link is in the head, if you click it the result is the correct. In the CSS, the font-family is the correct, but the font I am seen in my screen is not the correct.
This is the link:
<link rel="stylesheet" id="options-google-fonts" title="google-fonts" href="//fonts.googleapis.com/css?family=Open+Sans:300%7CMontserrat&subset=latin&v=1399056353" type="text/css" media="all" />
And the CSS:
.caption-wrap .line-2, .caption-wrap .line-3, .caption-wrap .line-5 a, .navbar-nav>li>a, .service-wrap .service-btm a {
font-family: Montserrat;
}
Nobody can tell me if is there a problem with this?
Use this snippet to link the CSS, it's done the way Google recommends to link their fonts:
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
You put the stylesheet <link> element inside the <body>. It should be in the <head>.
As far as Chrome is concerned, a page served as HTTPS should not be calling a resource served as HTTP. Chrome isn't picky about when things are the other way around, so it will happily retrieve an HTTPS resource via a page served as HTTP.
Solutions
Match the protocols
Make sure you always call the https version of your Google Webfont URL. For example:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300%7CMontserrat&subset=latin&v=1399056353'
rel='stylesheet' type='text/css' media="all">
This link was generated by Redux Options Framework. The problem seems to occurs only on Chrome in Windows 8.
The problem fixes deleting the title attribute.
I was trying to host my css files on an cloud storage service but when I linked it to my website it was not executed,
so i created an small css which just changes background but yet it doesn't works.
It seems there is some problem with its server will you please tell me what could be the problem and how to use it as css
link of css file http://copy.com/Kgs8EaMF71Qa7zqo/style.css
HTML Code
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css" rel="stylesheet" type="text/css" />
https://developer.mozilla.org/en/docs/Incorrect_MIME_Type_for_CSS_Files
At least Gecko has a security feature for this: All stylesheets not from the same origin must be served with text/css.
In fact, you're file is served as text/plain, so the rules in it are ignored.
Due to security reasons MIME type of files hosted on copy.com is served as text/plain
So an normal link like of CSS file from copy.com will not work.
But if you still want to host your css files on this cloud storage service you can by adding ?download=1 after your link so you html should be like
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css?download=1" rel="stylesheet" type="text/css" />
there are several other cloud service like Dropbox,Google Drive where you can host your external CSS files.
I think, it may be due to MIME type, you uploaded assuming it will work as css file but its actual MIME type will be plain type text/plain but required MIME type to make it work as css file is text/css
So It Wont work.
This file worked perfectly for me.
here is the html code with the output.
<html>
<head>
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>