I am using brackets to edit a simple HTML document. The document refers to a CSS hosted on a CDN:
<head>
<title>Test server monitor</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
This call works perfectly from the production server. However, when loaded in Chrome using the Live Preview mode, the external CSS is not loaded. I guess the reason is some cross-site limitation.
How do I allow Chrome to use A CSS from a CDN called from a local file?
You can fix this relatively easy, simply change your href to:
http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
The http: ensures the correct protocol is being implemented for the request.
Related
I am using bootstrap 4.3.x. I want to include CSS using localpath but the CSS is not getting applied if I do so. below is the localpath.
I have tried placing the following source URL to include bootstrap.min.css which does not work
link href="css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"
Where as when I use the below CDN path, it works.
link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"
including localpath should show proper elements in index.file. as of now, it shows scattered elements. I checked the browser console, and I am getting the below errors
Access to CSS stylesheet at 'file:///C:/xampp/htdocs/resumo/css/bootstrap.min.css' from origin
'null' has been blocked by CORS policy: Cross origin requests are only
supported for protocol schemes: http, data, chrome, chrome-extension,
https.
2 . Failed to load resource: net::ERR_FAILED
simply delete all these lines from your href code
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"
and keep only this line
link rel="stylesheet" href="css/bootstrap.min.css"
or you can just copy this line and replace yours with it. just make sure your files are in the same folder as your index.html
link rel="stylesheet" href="css/bootstrap.min.css"
I was trying to directly open the file in browser which caused issue for css loading. Actually, I need to turn on the web server (apache on xampp in my case) and access the file using http protocol with url http://localhost/project/filename.
Thanks to Nik who find the answer for me
I am using Roboto from googlefonts.
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
After adding HTML5 Application Cache chrome blocks the request for the css file.
Without using Application Cache (simply removing manifest="myApp.appcache") everything is fine.
Could anybody explain me why this happens and how to fix this?
Note: The CSS-file is not added to the application cache manifest file.
I believe any resources not included in the .appcache file are blocked.
I am building a site and had all of my CSS, HTML working wonderfully. I wanted to add in some PHP functionality so I have created a local development environment on my mac with Apache. I then moved all of my site folders to my new Sites folder that can be accessed by localhost. When loading my website and now none of my CSS styles are loading. I am using Twitter Bootstrap locally. This is what my css links look like in my html:
link rel="stylesheet" type="text/css" href="http://localhost/~tromph/YoointooSite/bootstrap.min.css">
link rel="stylesheet" type="text/css" href="http://localhost/~tromph/YoointooSite/main.css">
I've tried just about every other path that I can think of and nothing else seems to work.
I changed my folder structure and the file path to:
<link rel="stylesheet" type="text/css" href="/bootstrap-3.3.2-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/bootstrap-3.3.2-dist/css/main.css" />
This fixed my problem of not having the CSS render. Now the images linked in the CSS are not showing. Dev tools is telling me that I am getting an error 403 (forbidden) on each of my images. What should I do to change this permission?
I spent some time updating permissions. Everything is working now. Thanks for your help!
I would recommend referencing the CSS files relatively. So if you have the following folder structure.
myProj
- css
- bootstrap
- bootstrap.min.css
- index.html (or php)
Then you would reference the bootstrap file like so
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css" />
Guessing at your folder structure from your example I would then assume that all you need is
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="main.css" />
If however your css files are not in your project, but instead are served externally, then you would need to reference them from wherever you are serving them. For example if serving them to port 8080, then you would need to reference them using that address instead.
<link rel="stylesheet" type="text/css" href="http://localhost:8080/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://localhost:8080/main.css" />
Again, the above is only if you are serving them externally from the site that you are attempting to use them from. If they are inside of the project you are working on, then reference them relatively from the file attempting to use them.
The first thing I would look at is whether or not it's a path issue with your styleheets. Use web inspector or dev tools in your browser and look for a 404 error in your CSS files. If there are any, dev tools will show the path it's looking for and you can adjust the path to your style sheets accordingly.
Good luck!
Thought I'd throw my input into the works.
I named one of my CSS files style.css than later went and deleted it and created a new style.css and my wamp server kept referencing the first style.css file I made.
So I renamed the second CSS file to main_style.css and everything worked perfectly.
Use Developer tools in google chrome or other browser and in the sources tab look for errors. Two common errors are your css files not being found (see relative path answer above) or maybe your file permissions don't allow the Apache server to access the CSS files.
I once faced the issue of CSS not being applied when I was working with PHP.
I fixed this issue by doing Empty Cache and Hard Reload (chrome).
To do that:
Open DevTools
Right-click on reload button(top-left)
Click on Empty Cache and Hard Reload
After doing this, all my CSS styles were applied.
I also faced same problem but later found a solution to it. Just Press 'Ctrl+F5' when the css file doesn't open on the browser window.
I'm trying to get my website to load correctly over SSL, and every time I view the page, the icons and font aren't loading.
Here's what I'm using for my CSS and font awesome.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600' rel='stylesheet' type='text/css'>
Here's a link to the website in case you want to check the full code
Try remove http: from href:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
There is a great article about protocol-relative here: paulirish.com/2010/the-protocol-relative-url/
I had the same SSL/TLS error/issue over the chrome. It worked OK on the firefox. I had to switch the sources.
There is issue with MaxCDN you need to use KeyCDN.
Switch from:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
to:
<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet"/>
Try using
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
and maybe its a simple issue of using "http" instead "https" because the google apis use https for secure link transfer. Replace http with https
In my case change http source to https while using #import statement in css file works fine.
#import url(https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css);
[class*="fontawesome-"]:before {font-family: 'fontawesome', sans-serif;}
Try downloading the font-awesome zip (css & assets) and serve them from your own server/directory - instead of using the CDN links.
Then just refer to the font-awesome css file in your own directory using https://
This worked for me.
I assume your webbrowser blocked the HTTP resources from being loaded from a Server that is configured for HTTPS, which is referred to as "Mixed Content", and is flagged as a security risk.
A secure site should never load resources via a non-secure mechanism.
Perhaps your webbrowser auto-updated to a newer version that does not allow Mixed Content to the loaded.
What is Mixed Content? - Google Developers
I had this same problem - after lots of attempts using the CDN links, with and without https://.., I decided to download the font-awesome zip file and serve them instead from my own server.
Put all the css and assets on your own server, instead of loading them from the CDN link with https://..
Then, just refer to font-awesome.css file using https://..
Eg:
<link rel="stylesheet" href="https://yourdomain-name.com/assets/font-awesome-4.7.0/css/font-awesome.min.css">
This fixed it for me, after going round in circles.
I am making a small recipe website for a friend of mine in django. Currently, I am in the process of deploying it to Heroku. I am using Amazon S3 for static content.
Here is the website: https://chiryaroti.herokuapp.com/
It seems S3 itself is working fine as it downloads css, and js. But, when I "inspect elements" in firebug, it says no style attached.
Why is not HTML making use of the css stylesheets ?
Thanks in advance.
You are requesting insecure resources(http) in a secure page(https), those resources are blocked by browsers.
You should use protocol-relative paths.
e.g.
<link href="//chiryaroti.s3.amazonaws.com/css/main.css" rel="stylesheet" />