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.
Related
I'm building my first website and the structure is as follows:
a folder named website containing two subfolders named html and css. The html folder contains one file named home.htm and the css folder contains two files named general_style.css and home_style.css.
In home.htm i have put the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My title</title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet"
href="../css/general_style.css"
type="text/css">
<link rel="stylesheet"
href="../css/home_style.css"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- code goes here -->
</body>
</html>
This works fine in Firefox on my desktop, but not in Chrome on my smartphone. On the smartphone only the html is shown and the icons from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css.
All the code from my own css files is not shown neither are the icons from https://kit.fontawesome.com/a076d05399.js.
Can somebody help me out here?
PS: both html and css files are validated with no errors or warnings.
I can't say why it is not working. But I can tell you that if you're planning on building websites and testing them on various devices, you might want to run a local web server. This way, all your files can be hosted in your computer and you can access your site from any device connected to your network, using the local IP address of the computer that hosts the files. (ex: 192.168.0.x/home.html would show you your site if you open it in your mobile browser, without having to manually transfer any files.)
This is also the preferred method since it is closer to how users will access your website in the future.
You might want to look up "how to run a local web server" to find some guide that suits you. There are many methods and software tools to choose from.
If you are on a Mac, here's a quick and easy way to run one:
Go to /Library/Web Server/Documents and paste a folder with all your code and assets. Name it something simple, with no spaces
Open the terminal and type sudo apachectl start. It will prompt you for your password. Type it and press enter. (it might seem like its not typing because it wont show you anything, but it is working.)
Open your browser and type localhost in the address bar. You should see some big serif bold letters that read "It works!".
You're all set! Now just visit localhost/folder-name/home.html and it should show you your site! (hint: you might want to rename your home.html to index.html. If you do so, you will be able to visit localhost/folder-name/ and the server will automatically load index.html
Remember that if you are going to access this from your mobile phone or any other device, you must be connected to the same network. Also, entering localhost will not work. From other devices you must provide the local IP address of the computer running the server. Something like this: 192.168.0.5/folder-name/home.html/. You can find the computer's local IP in your Network Preferences.
(This works because macOS comes with the Apache webserver software preinstalled, and has set the /Library/Web Server/Documents/ folder to be hosted by apache. What we do in the terminal is just turn apache on. You can turn it off by typing "sudo apachectl stop" in the terminal).
You are trying to run your code on mobile browser?
Since it works on your computer Firefox browser smoothly but it wont work on mobile phone, this might be because you dont have the CSS files on your mobile device and have them on your desktop. I think that is a issue.
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 need some help. I decided to create a home FTP server for my family. I hit a roadblock a few hours ago. When I was creating my home page, I wanted to test it in Chrome. I linked a css file to it aswell. I expected to see the test webpage, which was a h1 with the text hello. What actually happened was the fact that it downloaded my html file, and when I opened that in Chrome, I saw my page without the css. I've tried everything to speak of on this site and I even checked page 2 of Google. Here's my code, I'm running FTP on IIS 10.
<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
As far as I know, chrome download the html page is right. Since you use chrome to access a ftp file, it is not a http connection to the server. The chrome will not directly show it.
If you want to show the html page in the browser, you should use IIS website instead of ftp site.
More details about how to create a IIS web site, you could refer to below article.
https://support.microsoft.com/en-sg/help/323972/how-to-set-up-your-first-iis-web-site
i guess you are putting it in a wrong format
as https://www.w3schools.com/css/css_howto.asp says
<link rel="stylesheet" type="text/css" href="mystyle.css">
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.
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