I have been learning how to make client-server applications recently and am following this tutorial by Traversy Media. This is the Github page for the code that mine is based on. Though I have resolved the MIME type issue that is brought up.
But the problem is, when I run the code, the CSS stylesheets(both the stylesheet linked to the website and the style.css file in the css folder) do not appear to be applied to the HTML page. What happens when I run the HTML file is that the HTML page appears to be without any style, meaning that although the HTML does appear in the webpage, the HTML elements do not have any styles.
I thought that it was simply because of an error in referencing the CSS files but I have tried to fix it by moving the CSS files around and also changing the hrefs of the link element in the HTML code and also copying the code of the CSS stylesheet from the website into "online-resource.css" but none of what I did worked.
<link
rel="stylesheet"
href="online-resource.css"
type="stylesheet/css"
/>
<link rel="stylesheet" href="style.css" type="stylesheet/css"/>
Anyone have any ideas? It probably doesn't have anything to do with node.js because the same thing happens when I run it independently
Change your type property to be text/css not stylesheet/css which is being interpreted as an invaild type and not allowing the CSS to load.
<link rel="stylesheet" href="online-resource.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
I think the css file not loading properly. Also check whether the code inside the css files are correct or not.
Make sure you saved the file. It's silly, but I can personally vouch for the time when I couldn't make my site update, and I forgot to save/update the file I was viewing.
Make sure the stylesheet is loading. In Chrome, if you right-click -> inspect element and go to the sources tab, you can see all loaded resources, including your CSS.
For the life of me, I can't get my Favicon to work in Google Chrome. It works in IE and Firefox. It sometimes(?) works in Google Chrome when I am on the localhost. Once I deploy it, I can never get it to show up.
I have this in my HTML:
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
I put this in my main Py file based on some other posts I have read:
#app.route('/favicon.ico')
def favicon():
return send_from_directory(os.path.join(app.root_path, 'static'),
'favicon.ico', mimetype='image/vnd.microsoft.icon')
If I go to /static/favicon.ico, it shows up. If I go to just favicon.ico, it shows up. I have cleared my cache and cookies a thousand times. I've tried everything. It will not show up.
I am not getting any error messages, but in the browser console, if I go to Favicon page directly, it does say this:
Resource interpreted as Document but transferred with MIME type image/x-icon: "http://localhost:5555/static/favicon.ico".
Maybe that is a hint of what is wrong?
What is going on?
try to rename the icon from favicon.ico to something else .ico ( for example icon.ico ), i know it seems strange but it should work
i got same problem but i cleared by just rename the favicon as scon(any other name) and save the .ico file in static folder and make sure the name is same as filename.
(used google chrome)
<head>
<title>My Webpage</title>
<link rel ='stylesheet'type="text/css" href="./static/style.css">
<link rel="shortcut icon" href="{{ url_for('static', filename='scon.ico') }}">
</head>
TL; DR
Make sure you have no body-only markups (eg. div, p...) in your head.
In details
The "works-everywhere-but-Chrome" issue is often due to a particular behavior of Chrome regarding invalid markups in the head section of the HTML page.
When Chrome finds a markup that is not expected in head (eg. a div: this markup should only appear in the body), it considers the head to be closed and the following markups are thus deemed to be in the body, whatever the raw HTML says. And because Chrome ignores link markups when they are in the body, it is as if the favicon was not declared at all.
Two ways to fix this:
Review the head section of your HTML page. Tip: don't browse your code, and don't browse the elements of your page with Chrome DevTools. Instead, use View Page Source to really look at the raw HTML.
You can submit your page to the W3C Validator. If you have a body-only markup in your head, the validator will report it.
Try placing something like this in the head section of your HTML, I had the same issues:
<link rel="icon" type="image/png" sizes="32x32"
href="{{ url_for('static', filename='favicon-32x32.png') }}">
You can add other sizes if you have them, the device your website is accessed from will choose the best for them.
After that, make sure to clear your cache again. Here is a StackOverflow answer with a few good ways to do that.
Go to your template, you should have something like this:
link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"
Delete the line, save, refresh page (should be gone). Put the line in the template again.
Refresh. Should have updated
I read different questions on stackoverflow regarding this issue but i haven't got any solution for my case, the rest of my pages are displaying css well, but index.html doesn't display.
But surprisingly when i run my project locally it works very well.
What am i missing?
My github pages link :
https://huxaiphaer.github.io/-Ride-My-Way/index.html
My github project link , in the branch gh-pages:
https://github.com/huxaiphaer/-Ride-My-Way/tree/gh-pages
Your href was wrong for your css import. You were navigating up more folder.
<link rel="stylesheet" type="text/css" media="screen" href="UI/css/index.css">
Here is my exact issue. In the head of my theme I have a this link:
This link is broken, and is causing my page to slow down on load times. How can I remove or correct this link?
Chrome devTools Exact Error Picture
Replace your google font link with https protocol
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
I'm just transferring all my files over from xampp's htdocs to my server and now I just need to add a favicon.
I have the icon saved as 'favicon1.ico' and it is a proper icon size 16x16, but I cant get it to work.
This is the code I have for it:
<html>
<title>Server Test</title>
<head>
<h1> Hello World </h1>
<link rel="shortcut icon" href="O:\Intranet\favicon1.ico"/>
</head>
<body>
</body>
</html>
That is the correct location of the icon in the href so I dont see why this shouldn't work.
I've never added a favicon to a site before so that is where my main problem of not knowing exactly what it should look like lies.
Your Favicon path uses a windows style File path as pointed out in the comments.
Ensure the following
favicon1.ico file is present in the package that you are transferring onto the server.
Ensure that the file is accessible over http (try using a browser to navigate to it). The path should be something like http://server:port/app-uri/favicon1.ico
After that as suggested in one of the comments use a relative path such as ./favicon1.ico in the HTML source.
Also I suggest reading up on the concept of favicon http://www.w3.org/2005/10/howto-favicon
Code below should work. Try this.
<link rel="icon" type="image/png" href="http://yoursite.com/favicon1.ico">
Notice that href points to the address of your icon depending where you put the icon.