I am trying to use netdna.bootstrapcdn.com. It's working perfectly in Firefox and Chrome but not loading in IE - 11 or Edge.
Importing the CSS library like this:
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
The error is throwing in browser console is :
Even tried copy/download CSS texts and paste in a custom file and importing the same file then it breaking in all browsers.
You are getting this error due to bad URL reference. In the example below, the href attribute of the Font-Awesome library has been edited.
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<i class="fa fa-adjust" aria-hidden="true"></i>
I don't know exactly how you are setting things up - for example when you did the test 'direct' and got the error on all browsers whether you have a doctype, that sort of thing.
However, the basic problem seems to be in the URL syntax. With only // at the start Edge (on my Windows 10 system at least) failed to find the file - after a reasonable pause. Adding the https: Edge was happy and found the file.
This snippet seems to work fine:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
</head>
<body>
</body>
</html>
Related
I'm having problems with linking CSS and JS files in my HTML file's head.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" src="https://www.w3schools.com/w3css/4/w3.css">
<script src="/socket.io/socket.io.js"></script>
<script src="client.js" type="script"></script>
</head>
File paths look like this:
>node modules
-package.json
-package-lock.json
-server.js // Make the express and socket.io stuffs
>main //folder
-index.html
-style.css
-client.js
I've looked at a lot of previous threads about this but nothing fixed my issue.
Both the CSS and JS files are correct, there aren't any errors in them, or at least my editor (VS code) says so.
The console gives me this error:
Refused to apply a style from 'http://localhost:3000/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Please try to remove the comments from the beginning of the style file
for more info check this answer
https://stackoverflow.com/a/48270432/5092690
Replace
<link rel="stylesheet" type="text/css" src="https://www.w3schools.com/w3css/4/w3.css">
with
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
I was facing the same problem while using visual studio code
the css and javascriplt files are not connected to my HTML file although I have checked everything and its all correct
it's solved when I type "link" in the text editor, I choose "link:css" from the dropdown menu of Auto complete
and the same idea with javascript file type "script" and choose "script:src"
I am really confused and I do not understand why I am getting the error below whenever I add an img element and I link an image file to it. The path to the image is correct, everything is done locally, the image is displayed without any visual issues. But whenever I open the console I see this error message:
The weirdest thing is that whenever I open another html file in the same project and I just add ANY image to it just to test, I get the same error, even though I never got that before. This is in Chrome by the way. I also tested in Firefox, Opera, IE, Edge and Safari, but there I see no error messages. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Warcraft III Veto</title>
<!-- Normalize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<!-- Main Style -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="veto">
<div class="bar">
<img src="img/races/human.png">
</div>
</div>
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<!-- Main Script -->
<script src="dist/js/veto.js"></script>
</body>
</html>
Something else I noticed is that whenever I delete my scipt tags that link to both my script file (which by the way is empty as well as my css), and vue.js, the error message dissapearas. I checked to see if the link to vue was correct and it was. I deleted all files and re-created them, but I still get the error. I am so confused, any help would be greatly appreciated.
I think this might be an issue with the version of Chrome.
This should be resolved in the latest update as per the discussion on this thread.
Hope that helps.
I was handed a site to update at my job that utilizes one template file. I have made changes to both the template file and the index file as well as several CSS files. What happens when I launch the website live is that the sites contents appear without any styling/functionality. I believe I have linked to all the correct styling links in my head sections because in Dreamweaver the sites render perfectly fine in both Firefox and IE. I'm in a jam at my job. Any help is appreciated! Thanks
UPDATE: I selected the option from Dreamweaver's Modify menu: "Apply template to page" which corrected some of the CSS reference issues. The page renders perfectly now in IE 9 but still no styling whatsoever in Firefox. Any ideas from anyone? I'm completely stuck now. Thanks for all the answers so far!
Open Firefox developer tools, check the Network tab for any 404s, particularly on .css files. If there are any, that means it can't access the file.
The permissions on a directory could be wrong, the webserver (nginx/apache) might not be able to access it, or you may have linked it incorrectly (is your website in a subfolder or at the root of the domain? do your links need leading slashes?).
The path to the CSS files are incorrect, set them correctly (Absolute or Relative)
<link href="file://///hqdaa0n02731-06/wtc$/css/bs_paper/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen, min-device-width, resolution" />
<link href="file://///hqdaa0n02731-06/wtc$/js/plugins/css/bootstrap-accessibility_1.0.3.css" rel="stylesheet" type="text/css" />
<link href="file://///hqdaa0n02731-06/wtc$/css/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="file://///hqdaa0n02731-06/wtc$/css/wtc_home_3box_pic_option.css" rel="stylesheet" type="text/css" />
<link href="file://///hqdaa0n02731-06/wtc$/css/yamm_2014.css" rel="stylesheet" type="text/css" />
Should be like this:
ABSOLUTE
<link href="http://www.wtc.army.mil/css/yamm_2014.css" rel="stylesheet" type="text/css" />
RELATIVE
<link href="/css/yamm_2014.css" rel="stylesheet" type="text/css" />
I'm trying to use Font-Awesome 4.2.0, I can see the css is loaded, but the fonts are not. I'm am using Chrome, but have the same issue in FF and IE too.
I've created a stripped down version to demostrate this:
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
Remove It - <i class="fa-remove"></i>
</body>
</html>
http://plnkr.co/edit/eF6tPerRYOZHAdzzkdyk?p=preview
Obviously, I'd like to know how to solve this, but more importantly, I'd like to know how I can track down font problems better in the future. Using the Chrome dev tools, I can see that the font is not loaded, but I don't see why.
Try:
<i class="fa fa-remove"></i>
If I try and link my CSS to my HTML page with either cssstyle2.css ||fifastream1.0/cssstyle2.css or even %fifastream1.0%/cssstyle2.css it wont display any of the CSS on the webpage. (FF, IE, Chrome). I've uploaded my CSS page to stackoverflow before and apparently its fine.
Obviously its no good if I can only get my webpage to 'properly' work on my drive. Soo any idea's why FF, IE or Chrome cant pick up my CSS?
Been working on this for a few weeks now, as a complete beginner. Would be great help if someone could find the answer! I've searched and tried everything.
This is the link in the of the HTML (if this helps at all)
<!DOCTYPE html>
<html>
<head>
<link href="C:///*****/******/Desktop/FifaStream1.0/cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
<title> Fifa Stream </title>
</head>
<body>
When everything is in the same foldre you should use the following:
<link href="cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
When you're CSS file is in a different folder use:
<link href="folder/cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
If your CSS file is one directory above the html file then use:
<link href="../cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
To have relative referencing, ur CSS needs to be in at least somewhat referential place. for example, if the page is in Users/whatever/index.html, your CSS would be in Users/whatever/css/style.css. Then your reference would be to "css/style.css"
A quick reference guide:
<!--
./filename or filename = same folder as page location
../filename = folder above that of page folder location
/filename = root folder of project
-->
If your CSS file is in a completely different location than your page file, it can't possibly be found unless you provide the full path as you had to.