I have a local HTML file which has a link to a local CSS file. Both files are on machine A. The HTML is in one location but the CSS is stored elsewhere on machine A. The HTML file is a report generated by a program running on machine A. The user reads the HTML report on machine A.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My very first html document</title>
<link rel="stylesheet" type="text/css" href="C:\tmp\folder1\css\mystyle.css" />
</head>
<body>
<div class="myclass" >Hello World!</div>
</body>
</html>
CSS mystyle.css
.myclass {
background-color: yellow;
}
The folder structure is like so:
C:
+
+->tmp
+
+>folder1
| +
| +>css
| +
| +>mystyle.css
+>folder2
+
+>index.html
In Firefox the CSS is not applied. The results from Firefox, Chrome, IE, Edge (clockwise).
Version of Firefox: 63.0.3 (64bit)
What I have tried
Relative path to the CSS (href="../folder1/css/mystyle.css" ). This works.
Changed from forward slash to backward slash, escaped slashes. This did not work.
I would prefer the absolute path for the CSS.
I would prefer not to copy the CSS.
Questions
Can someone explain why Firefox does not apply the CSS?
What is a quick fix for this problem?
What is the right-thing-to-do?
Prepend file:// to the href of your css link and it will work. I just tried it myself using your folder structure. It originally didn't work in Firefox as reported but it did work in Chrome. Prepending file:// allows it to work on both.
<link rel="stylesheet" type="text/css" href="file://C:/tmp/folder1/css/mystyle.css" />
Firefox has no access to your filesystem for obvious security reason (see this kb post for more infos ) .
There are many possible workaround if you'd like to keep your css file on a different location, the most popular one being webpack or any other build system. Basically every modern front end development stack uses it. It is a node.js tool that will gather all your static assets using preconfigured path and "bundle them" in a local build.
If it is just a single css file for a single use-case, just use a relative path (or a file:/// prefixed path). The best solution here is obviously the quickest and easiest.
Related
I have used the Sublime text editor to make a simple CSS file with an objective to make the heading red. Now the below code works perfectly fine
h1 {
color:red;
}
<html>
<head>
<link rel="stylesheet" href="st.css" type="text/css">
<title>Minutes</title>
</head>
<body>
<h1>A</h1>
</body>
</html>
But if I replace the CSS file name from "st.css" to its original file path, it no longer works.
<head>
<link rel="stylesheet" href="C:\Users\windows\Desktop\Python\Practise\st.css" type="text/css">
<title>Minutes</title>
</head>
<body>
<h1>A</h1>
</body>
</html>
Is there any specific reason for this?
I tried refreshing, saving and even live reload but it simply doesn't work. Please explain
Everything looks fine to me. I would just double check that you have the full path correct with no typos or missing directories. I tried the same locally with the equivalent fully qualified path on my Windows machine and it worked fine.
Try to edit the backslashes of the path to normal slashes.
Another way to solve this problem is to have a look at this website because there is a nice example on it.
https://css-tricks.com/quick-reminder-about-file-paths/
If you have any more questions feel free to ask.
I hope that I could help you!
If you're using a server/localhost, You are not allowed to load local resources, that are NOT inside your main website folder, for example: if you have a folder named mywebsite which contains mywebsite/index.html, then once you click twice on index.html, You are allowed to access all files inside you computer, BUT if you run mywebsite in localhost you'are only allowed to access files inside mywebsite folder.
If not You probably made a typo in your absolute path, because your code is working fine in my device.
Seems like I figured it out myself.
I was sure that there couldn't be a typo since I right-clicked (holding shift) on my CSS file and copied its path. I think the problem was on how my browser sees the text.
For example, the below code which has a code path I copied as I mentioned works perfectly fine on Internet Explorer
<html>
<head>
<link rel="stylesheet" href="C:\Users\windows\Desktop\Python\Practise\st.css" type="text/css">
<title>Minutes</title>
</head>
<body>
<h1>A</h1>
</body>
</html>
I saw the pathname on Internet Explorer's URL as
C:\Users\windows\Desktop\Python\Practise\Minutes.html
Now the same code didn't work for Mozilla Firefox which is my primary browser as I noticed the difference between the URL of Firefox and Explorer was of some random slashes at the start, like this
file:///C:/Users/windows/Desktop/Python/Practise/Minutes.html
Therefore I put the file:/// text on my original code as
<html>
<head>
<link rel="stylesheet" href="file:///C:\Users\windows\Desktop\Python\Practise\st.css" type="text/css">
<title>Minutes</title>
</head>
<body>
<h1>A</h1>
</body>
</html>
I even interchanged the backward and forward slashes and it still worked !
So I can conclude that my problem was a browser-specific error and I am really grateful to the community for their quick responses.
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.
No matter how I link my stylesheet, the resulting page remains unstyled.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test test test
</body>
</html>
CSS:
#charset "UTF-8";
body {
background-color: #f25f29;
}
Both files are located in the same folder, which is test inside the xampp htdocs folder. Another website with stylesheet, which I have taken from a book in another subfolder inside htdocs is just fine. (I tried to figure out the mistake in my own page based on the working one, but I couldn't find it)
I already tried the following things:
different paths
style.css
./style.css
/opt/lampp/htdocs/test/style.css
file://opt/lampp/htdocs/test/style.css
/test/style.css (since I guessed that the localhost takes htdocs as root directory)
file://test/style.css
matching the charset specifier in CSS and HTML files (all uppercase)
using /> to close the link instead of >
inserting a space between linkname and closing bracket
sudo chmod 777 * inside the test folder (changed it back to 644)
restarting xampp
omitting the type="text/css" specification
quadruple-checking the name of the stylesheet and its path
I've had it never enclosed in <style> tags
Also always used the straight quotation signs instead of the "italic" ones
The version that I have given above is the one that works in the other case.
Edit: Clearing the cache the cache fixed it, as suggested in the comments.
When CSS is not updating on your website, it could be that the website has an older version of the stylesheet in the cache. Clearing this will make it fetch the updated version.
To find out if this is the problem:
Right click on page and inspect (element)
Navigate to Sources
Navigate to your Stylesheet
check if this is the updated version.
If your stylesheet is not up to date, clear cache and check if it worked.
For example:
Clear cache in Google Chrome
Clear cache in Internet Explorer
Clear cache in Mozilla Firefox
I have been learning to code HTML and javascript and have run into a slightly confusing (and very frustrating issue) around loading scripts and css using relative paths when accessing the page using an IP address. Both Chrome 30.0.1599.69 and IE10 seem to have no problem but Firefox 24 does, and only when using an IP address rather than the name.
Folder structure is:
Dashboard/index.html
Dashboard/css/dashboard.css
Dashboard/js/dashboard.css
Dashboard/leaflet/
etc
The HTML looks like:
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<meta charset="utf-8" />
<!-- css loading -->
<link rel="stylesheet" href="leaflet/leaflet.css" />
<link rel="stylesheet" href="css/dashboard.css" />
<!-- script loading -->
<script src="leaflet/leaflet.js"></script>
<script src="js/dashboard.js"></script>
<script src="d3.v3/d3.v3.js"></script>
</head>
<body>
etc...
The above works fine when opened via localhost (using python simpleHTTPServer) in all browsers (http://localhost:8888/Dashboard/ in the browser bar). When I move the Dashboard folder and subfolders to the default webpage area (C:\Inetpub\wwwroot\) in Windows Server 2003/IIS 6.0 and attempt to access the page it also works fine - until I try it with the IP address using Firefox.
For example, http://mywebpage/Dashboard/index.html brings up the page and loads all the css, js files etc correctly. Using the console I can see:
[10:57:32.081] GET http://mywebpage/Dashboard/css/dashboard.css [HTTP/1.1 200 OK 10ms]
When I try it with an IP (as the name only resolves on our network and I want to display the page when outside) I get the following error in Firefox:
[10:57:25.135] GET http://XXX.XXX.XXX.XXX/css/Dashboard.css [HTTP/1.1 404 Not Found 7ms]
Not only that but the URL looks different in the Firefox address bar: XXX.XXX.XXX.XXX/Dashboard\index.html# < note the backslash and # appearing.
I do not have this issue in Chrome or IE10. So it seems that Firefox does not look relative to the path of the html document but rather the server when using an IP address to access, whereas Chrome and IE10 do look relative to the page regardless of using a name or an IP. Firefox also decides to display a backslash and add a # at the end.
I have found that coding the links with the folder name does seem to resolve the Firefox IP address issue, <link rel="stylesheet" href="Dashboard/leaflet/leaflet.css" /> however it messes up Chrome, as the folder name gets added anyway in the network path (seen in the console): http://XXX.XXX.XXX.XXX/Dashboard/Dashboard/leaflet/leaflet.css. Why does Firefox behave like this and why only when an IP is used?
-Update-
I have tested this on a colleagues machine and the behaviour is not replicated, frustratingly, so I am starting to think it is something wrong with my Firefox install.
-Update 2-
A reinstall and Firefox is behaving as expected with localhost, servername and IP access to the webpage. So hopefully this will no longer be an issue! I am still using relative paths, a leading "/" makes it look in the root folder of the server and affects debugging with localhost.
With the way you have the code now, it will always be looking for a folder named leaflet, etc, inside the current folder (as opposed to the root/base folder). Try changing it to this:
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<meta charset="utf-8" />
<!-- css loading -->
<link rel="stylesheet" href="/leaflet/leaflet.css" />
<link rel="stylesheet" href="/css/dashboard.css" />
<!-- script loading -->
<script src="/leaflet/leaflet.js"></script>
<script src="/js/dashboard.js"></script>
<script src="/d3.v3/d3.v3.js"></script>
</head>
<body>
A reinstall and Firefox is behaving as expected with localhost, servername and IP access to the webpage. So hopefully this will no longer be an issue! I am still using relative paths, a leading "/" makes it look in the root folder of the server and affects debugging with localhost.
I have a site that uses a base tag to set an absolute path for relative URLs. It works fine in all the browsers I tested it in, except IE (big surprise). Based on the request that IE is making for the CSS file, it seems not to notice the base tag. It does acknowledge the base tag with everything else on the page. Why is this happening? Can anything be done about it, besides using an absolute path to reference the CSS file? Here is my code:
<!DOCTYPE html>
<html><head>
<title>base test</title>
<base href="/baseTest/">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>foo</div>
</body></html>
This is what is in the baseTest/style.css file:
div {
background: yellow;
}
EDIT: The same thing seems to happen for images too. All of the tests I did were in IE9. The problem came up in standards mode, as well as IE8 and IE7 compatibility modes.
EDIT 2: It works fine if I specify an absolute URL. I didn't know that support for relative URLs was a recent feature. I may abandon my plan use the base tag to avoid repeating paths, unless I can find some way (like maybe a JS hack) to make this work.
Sample page: http://www.debugtheweb.com/test/base/relative.html
I don't know for sure if this is your issue in IE or not, but according to relevant portion of the HTML 4.01 standards document, the URL in the base href must be an absolute URI. Further, in the example, given it looks like this (with a filename on it):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Our Products</TITLE>
<BASE href="http://www.aviary.com/products/intro.html">
</HEAD>
<BODY>
<P>Have you seen our Bird Cages?
</BODY>
</HTML>
In Google searches, I found discussion of what version Firefox added support for relative paths in the base href (which is what you are using) so that is clearly not something that has always been there and not something the 4.01 standard appears to describe.
The HTML5 spec seems to describe and allow base URLs to not have a host portion (host relative) so perhaps that is something that has been added to the specs recently which IE has not supported yet or has not fully supported yet for CSS file loading.
I would suggest you try putting your domain in the base HREF.
According to html specs: http://www.w3.org/TR/html401/struct/links.html
refer: Path information: the BASE element section -
This attribute specifies an absolute URI that acts as the base URI for resolving relative URIs.
Chrome and Firefox supports relative paths in this tag but IE does not.
IE is following the specs strictly.
To manipulate and include absolute url in the base tag, just include script tag after <head> tag as given below
<script type="text/javascript">
document.write("<base href='" + window.location.href.substring(0, location.href
.indexOf("/context") + 9) + "' />");
</script>