index.html file doesn't show style when directly accessed through browser - html

So, I've been noticing when I want to check my designs directly by clicking on the index.html file, it just won't show the style:
But if I check it out through VS Code then it will show up
This is my html head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BMI careers</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" type="image/png" href="/img/logo.png">
</head>

Try taking the first "/" away from the roots.
what i mean is, instead of this:
<link rel="stylesheet" href="/css/style.css">
write this:
<link rel="stylesheet" href="css/style.css">
in all of them.

You have to make the paths relative paths, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BMI careers</title>
<!-- just add a '.' in front of the path -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="shortcut icon" type="image/png" href="./img/logo.png">
</head>
This is because the / means the root in your computer and ./ means current folder in which this file exist.
It works in vs code because you are running it on a local server and the root (the '/') is the root of the server not the root of your computer.

Try using ./css/style.css and ./css/bootstrap.min.css rather than just a /

Related

My Favicon is not showing up in Brave (HTML)

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digvijay Singh</title>
<link rel="favicon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="style.css">
</head>
I tried adding favicons present on my folder but it is not showing up.
Try clearing Browser cache and do check that the icon is less than 100kb(as it may be the cause that the icon isn't loading). You can check Security settings or disable any extensions that might be blocking it to load.

How do I get my Favicon to show in WordPress custom theme?

I am trying to get a favicon to show in WordPress header and its just not working for me - what would be the problem do you think?
I am using Twig/Timber for dev.
<link rel="shortcut icon" type="image/x-icon" href="{{options.header.favicon.url | default(site.theme.link ~ '/images/favicon.ico')}}"/>
Everything inspects just fine:
<link rel="stylesheet" href="http://protoolsite.local/wp-content/themes/protool-theme/style.css" type="text/css" media="screen"/>
<link rel="shortcut icon" type="image/x-icon" href="http://protoolsite.local/wp-content/themes/protool-theme/images/favicon.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="author" href="http://protoolsite.local/wp-content/themes/protool-theme/humans.txt"/>
When I check this link it pulls up no problems at all: http://protoolsite.local/wp-content/themes/protool-theme/images/favicon.ico it just keeps showing the wordpress "W" favicon.
Pretty sure Wordpress requires "icon" too.
<link rel="icon" type="image/x-icon" href="http://protoolsite.local/wp-content/themes/protool-theme/images/favicon.ico"/>
It'll be easier to go to appearance > customise > site identity in Wordpress though.

Html's title cannot be refreshed in SpringBoot project

I'm working with a SpringBoot project. And i want to change the html's . But it's not working for me, still show the default value Title. And this is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="/favicon.ico" />
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
But i found that if i just run this html file alone, the title will show correct。
Is there cache in SpringBoot?
This problem is caused by JRebel. I got the correct result without JRebel.

CSS Stylesheet Not Showing on Landing Page

I'm creating a landing page for work using a html template, I've taken this template here (www.switchonbook.com) and am editing it for a different product.
Regardless of what I do the second CSS won't show. I have
-Tested the CSS and the HTML through testers online, no problems
-Tried changing the location of the files
-Compared the code to the original code of the landing page
Here is the code I am using for the new landing page;
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css? family=Open+Sans:300italic,400,300,600,700' rel='stylesheet'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Switch On: Your DIY Toolkit</title>
<meta name="description" content="Switch On: Your DIY Toolkit">
<link rel="shortcut icon" href="http://www.ripeandready.com/wordpress/wp- content/uploads/2015/03/favicon.png" type="image/x-icon">
<link rel="icon" href="http://www.ripeandready.com/wordpress/wp-content/uploads/2015/03/favicon.png" type="image/x-icon">
<link href="http://switchonbook.com/css/styles.min.css" rel="stylesheet">
<link href="http://switchonbook.com/css/main.css" rel="stylesheet" >
</head>
<body>
Any help would be greatly appreciated!
There are a few errors in your code. For instance, here:
http://fonts.googleapis.com/css? family=Open+Sans:300italic,400,300,600,700
There should not be spaces after the ?. Similarly, there should not be a space here after the -:
http://www.ripeandready.com/wordpress/wp- content/uploads/2015/03/favicon.png
Also, you do not have closing </body> and </html> tags.

CSS styling removed from page

I'm working on a website right now, the homepage links up with the CSS as normal and displays fine. The about page for no apparent reason is not connecting to the style.css, the same header links are there as the homepage has, apart from an additional two stylesheets just to get two web-fonts to work. Can someone have a look and see any issues with this.
I've copied everything within the pages header.
INDEX
<!DOCTYPE html>
<html>
<head>
<title>The Naked Radish</title>
<meta name="description" content="The Naked Radish">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheet -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
ABOUT
<!DOCTYPE html>
<html>
<head>
<title>The Naked Radish</title>
<meta name="description" content="The Naked Radish">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheet -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/jennasue-webfont/stylesheet.css" rel="stylesheet" type="text/css" charset="utf-8" />
<link href="css/quickendjerk-webfont/stylesheet.css" rel="stylesheet" type="text/css" charset="utf-8" />
</head>
Index - http://www.jordancharters.co.uk/nakedradish
About - http://www.jordancharters.co.uk/nakedradish/about.html
This is your stylesheet: it is in a different language. Specify either of the following:
HTML
<meta charset="utf-8">
CSS
#charset "UTF-8";
UPDATE.. It seems as though you are using a relative URL for the stylesheet.. both pages are in different folders.. try setting an absolute URL? Let me know if that works.
Use this: <link href="http://www.jordancharters.co.uk/nakedradish/css/style.css" rel="stylesheet" media="screen">
It... looks like you've got some kind of encoding glitch on your about page, which is making browsers think that the CSS is encoded in a way that it isn't. Here's a brief excerpt of what my browser thinks your CSS says, when loaded as part of the about page:
⼪⁓瑹汥⁒敳整‪⼊੡牴楣汥Ⱐ慳楤攬⁦楧畲攬⁦潯瑥爬⁨敡摥爬⁨杲潵瀬敮甬慶Ⱐ獥捴楯渠笊।楳灬慹㨠
It kind of goes on like that for a while. The raw network response for the html isn't much better:
ÿþ<�!�D�O�C�T�Y�P�E� �h�t�m�l�>�
Although it appears that the browser can compensate for that part - you'll notice there's a DOCTYPE html hiding in between those garbage characters. And then it switches encodings or something partway through, and starts looking perfectly normal.
I thinks it loads but It's the Unicode problem ,set The unicode in your your HTML , and save your CSS again with standard Unicode