Files load using different file paths on server and local - html

When using css on my local Dreamweaver setup, I can only use the URL "./path/to/url" to load files. This is a problem, because on the server, I can only use the url "/path/to/url". Is there any reason this is happening?
Example :
<link rel='stylesheet' type='text/css' href='./css/Defaults.css'> on local,
<link rel='stylesheet' type='text/css' href='/css/Defaults.css'> on server.
This has been an ongoing problem for a while now and all previous answers found on google and stack overflow haven't worked.

Related

What path do I need to write to get css to work in GitHub pages?

I have tried multiple file paths in my HTML head to get the CSS to load in GitHub pages but it won't. It loads locally but not on pages.
I tried
<link rel="stylesheet" type="text/css" href="css/components/style.css">
<link rel="stylesheet" type="text/css" href="/css/components/style.css">
<link rel="stylesheet" href="css/components/style.css">
<link rel="stylesheet" href="/css/components/style.css">
None work, any help would be amazing
my repo
page
I tried changing the file name multiple times expecting the gh pages css to load it did not
The answer to this question is already here. Check out this stack overflow answer, which worked for me.

Browser renders same css file differently

I am having issues when loading the css file from npm vs loading from a cdn.
Using the CDNs below, I'm able to render forms without any issues.
<link rel='stylesheet' href='https://unpkg.com/formiojs#latest/dist/formio.full.min.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/formiojs#3.9.3/dist/formio.full.min.css' />
But when I render the forms from a local CSS file, the form renders incorrectly
<link rel='stylesheet' src="/lib/formiojs/dist/formio.full.min.css" asp-append-version="true"/>
You can see the difference here
Opening the 2 files in a browser and pasting into a diff tool, I noticed the difference seems to be around '×' which is located in 2 places.
When opening these 2 files in a text editor, they are identical.
In the browser, the CDN renders the string as '×' but the npm file renders as '×'.
How can I get the CSS file to load with '×'?
I've tried adding charset="UTF-8" to the link element but it still doesn't render correctly.
I assume this has something to do with encoding.
The file in question can be found here
https://github.com/formio/formio.js/blob/master/dist/formio.full.css
That might be a typo but can you try replacing
<link rel='stylesheet' src="/lib/formiojs/dist/formio.full.min.css" asp-append-version="true"/>
with
<link rel='stylesheet' href="/lib/formiojs/dist/formio.full.min.css" asp-append-version="true"/>
The key difference being href is used instead of src.

Links from HTML are going to root instead of the same folder? (LocalHost)

// THIS WORKS ('contact' is the folder we're in)
<link rel="stylesheet" type="text/css" href="../contact/local.css">
// THESE DO NOT WORK (they point to a 'local.css' in the root directory)
<link rel="stylesheet" type="text/css" href="./local.css">
<link rel="stylesheet" type="text/css" href="local.css">
This is only an issue on 'localhost'. It works perfectly well on the web-server I'm using but for testing it would be nice if I can use './'.
I'm using Phpstorm with PHP Built-in Web Server.
This is a known issue for PHP Built-in Webserver.
Currently, the webserver processes the path without trailing / as a file even if it's a directory.
To fix this, please make sure you have a trailing forward slash in your URL.
E.g. Instead of http://localhost/folder, use http://localhost/folder/

Github Pages doesn't show my index.html

I just recently bought a porfolio template and try to install it onto github pages. It will only show the background but there will be no images or text.
Note that your Github Pages site is hosted over https and your template is including plain text http links to resources. You cannot safely load plain text http resources in a secure https connection. You need to fix the error messages such as:
Blocked loading mixed active content http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic”
Note the conversion from http to https in the following links:
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lilita+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
And there's another with the jQuery link:
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
On a related note, your repository is missing the magnifique popup library. You can replace the URL with a link to a CDN. For example, change this line...
<script src="js/jquery.magnific-popup.min.js"></script>
to this line...
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
It's loading your index.html just fine, the problem is that your webpage is loading resources over insecure http when github defaults to using secure https, this results in mixed content errors so a bunch of other resources are failing to load.

Can't load angular or CSS file on Digital Ocean

I am completely new to Digital Ocean. I have a Ubuntu droplet set up on digital ocean and am able to access my index.html file on port 80. My app is set up as a single page application using angular routing.
It loads the navbar and seems to be loading bootstrap...but both angular and my own css file are not loading. I initially thought it was a problem with my bower installing angular dependencies, but even just my local css file is not being attached. My css file is included with:
<link rel="stylesheet" href="css/style.css" type="text/css"/>
For some reason bootstrap seems to be working though:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Any tips or suggestions on what the problem might be? I'm completely lost.
The hrefs in all your links are set up to work in your local environment, but not on digital ocean. Bootstrap works because you are linking to an external url on a CDN.
You'll have to work through all the relative links in your hrefs. There are numerous approaches to this, including embedding the entire server path.
I'm not certain but it might be enough to replace href="css/style.css" with href="/css/style.css" to get a root relative path.
You should first load your styles to Digital Ocean and link to them.
Here - href="css/style.css" - you use local path, which you have to replace with a URL of file on virtual machine.