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.
Related
I recently started my first program (very basic) and I ran into an issue immediately!
<link rel="stylesheet" type="text/css" href="gweeble.css" />
Using the code above, I attempted to attach a css stylesheet. In order to make sure it wasn't just me, I copy pasted the code from an example. And to make sure that the CSS was right, I put it in a style tag in the head of my HTML file... it worked. Next, I entered the dev tools in chrome (the browser I'm using. This is on a Chromebook using the caret editor) and the css file wasn't even there!!! If you have any ideas, I really need help!
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="gweeble.css" />
<title>gweeble</title>
<meta charset="UTF-8">
<meta name="description" content="uhhhh">
<meta name="keywords" content="google, grooble, gweeble, bored, I'm bored, Im bored, ugh, uhhh">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
body {
background-color: #4542f4; }
ANOTHER SOLUTION!!!!
Here's another reason why browsers may fail to load your css file....
I've read all the responses here (and on several other sites) but was still failing to have my apparently valid css file loading into my browser (as confirmed using the inspector - right-click over code in Chrome and look at 'sources' tab).
I usually use Chrome but also tried Edge with same results - html5 code ran fine but the layout was not being rendered. Inspection showed that css file was never loaded, never mind executed.
My issue turned out to be that the html code had been copied from on-screen tutorials and pasted into Notepad ++. In the process, I ended up with the wrong speech (") marks, so my guess is that the 'meta charset="utf-8"' statement
was inconsistent with the type of speechmark in the code?
Bottom line is that changing all the speechmarks by simply deleting and then re-typing resulted in a physically different shape of speechmark and working code.
Hope this was helpful....
Are you really sure you are viewing the correct HTML file? You can also check the page source (CTRL + U) to check the markup in your document.
This is usually because of a bad link in the <link> element. Are your HTML and CSS files at the same level in the file structure? If you need to go back up a level you may need to do href="./gweeble.css" Also try doing a hard refresh of your browser (hold the shift key down and click the refresh button if you're using Chrome) to clear the cache. Oh and double check the spelling of the CSS file name to ensure it is a correct match.
I figured it out! My computer was set to auto put my files into a google drive section ☹️. The problem was fixed by simply moving the folder to downloads.
In case you are using node.js, express, and EJS as templating engines
I just found this error on my website and looked here.
The problem I faced is
if you have a CSS file in your public directory i.e. views(in my case)
Note: You can access your CSS file from Browser Dev tools.
Using Chrome, go to Network in dev. section, and then click on CSS file. And check headers.
Make sure when you link any CSS file without any error of
type : "text/css"
Correct href = ""
Now, if you still can't access it,
so the problem may be that your browser may not be accessing the file correctly. Check the path where it should be, and where you had placed.
In my case: localhost:3000/views/css/style.css throws an error
But The actual link should be: localhost:3000/css/style.css worked
So change the href accordingly, and remove extra folders coming between so that your browser can access it directly.
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.
I usually read a lot and find solutions in here, but this time it seems I can't get this to work.
I have basic knowledge of html/css/js so this problem might have a banal solution which I can't see.
My website has roughly this structure at its root:
index.html
/css/style.css
/js/jquery.min.js
/folder/page.html
In my page.html head I have:
<script src="/js/jquery.min.js"></script>
<noscript>
<link rel="stylesheet" href="/css/style.css" type="text/css" />
</noscript>
(This is a simplified version, I have other css and js files)
The problem is that this way of pointing to a folder works with js but doesn't with css. If I take a look to the console errors, I see that the css file was mistakenly believed to be in /folder/css/style.css
I also tried using "../" and the same thing happens: works with the js but not with the css folder.
Is the <noscript> tag interfering somehow?
Thanks for your help!
Edit:
I SOLVED IT! There was a js overriding it all, telling which css to load according to the window size, so I corrected the paths in the js with "../" and now they all point to the root folder correctly! Thanks for somehow putting me on the right track! ;)
This should work:
<noscript>
<link rel="stylesheet" href="../css/style.css" type="text/css" />
</noscript>
Keep in mind that it will work only when you have javascript disabled. More info about noscript tag here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
My css appears to be being cached somewhere. I've uploaded a new css file and none of the changes have taken place. I thought that maybe it was being cached serverside so I slept on it and still, no updates to my css. I know it's not being cached in my browser because I've cleared that three times, and the tech support says server cannot cache. I need this css to take effect asap. Help would be much appreciated.
<link rel="stylesheet" href="~Content/site.css?t123456789" type="text/css" />
is what I have in my head tag of my _layout page.
You could try forcing the browser to refresh the css file by adding a timestamp to the link:
<link rel="stylesheet" type="text/css" href="/path-to-your-css/styles.css?t=12345678910">
I'm using html and css for the first time. On one computer the html refers to the css appropriately, but on another the css is not referred to at all. I think I'm linking to the css correctly in the html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
On both computers, I'm using the latest version of Firefox.
Any thoughts as to where I'm going wrong?
Thanks in advance.
Are you using your browser's developer tools?
Right click in Firefox and go to "Inspect".
Find the Web Console tab. There you will see if the reference to the css file is valid or if it returning a 404, not found.
Also, your reference should be href="/css/mystyle.css", to keep a clean root directory of the site.
Also, you might want to self close the tag:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css" />
And if that doesn't help, run your code through the w3c validator: http://validator.w3.org/