I have included all the files just once. I have triple checked it. Here are some screen shots. I noticed that the request headers are different. How do I resolve this issue?
<?php require_once("cssheadertop.php");?>
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta name="description" content="">
<link rel=stylesheet href='http://fonts.googleapis.com/css?family=Roboto+Slab'>
<style>.demo{text-align:center}</style>
<title>My title</title>
<?php require_once("cssheaderbottom.php")?>
This is cssheadertop.php
<?php require_once('../../templates/sitelink.php');?>
<link rel=stylesheet href=//maxcdn.bootstrapcdn.com/bootswatch/3.3.2/united/bootstrap.min.css>
<script src="https://code.jquery.com/jquery-2.0.0.min.js"></script>
<link rel=stylesheet href=../../rrssb.css />
<script src=../../rrssb.min.js></script>
<link rel=stylesheet href=../../style.css>
<link rel=stylesheet href='http://fonts.googleapis.com/css?family=Dosis:300|Orbitron:900'>
<script src=https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js></script>
<script src=../prism.js></script>
<link rel=stylesheet href=../prism.css />
<meta property=og:image content="">
UPDATE
sitelink.php just has PHP and cssheaderbottom.php just has navigation.
UPDATE 2
It is not just about bootstrap.min.css but every css file is being downloaded twice sometime thrice (You can see it in the images below).
this has nothing to do with your code, it has to do with your browser development setup, there is an option somewhere in your development console that is called 'Persist logs' that basically keep old files in the logs for you to compare, if you disable that feature you'll see that there is no load duplication of files, see my attached screen shot where i duplicate your problem by selecting the 'Persist logs' -marked in yellow
hope it helped you,
.
Related
I've been working on a project using SvelteKit and I have yet to figure out why my favicon is not showing up correctly on Safari (both desktop & mobile). Instead, it's actually picking up the favicon from a site I have linked on my footer! This is what's in the head of my app.html file:
<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, viewport-fit=cover">
<meta property="og:title" content="Movie Hunt" />
<meta property="og:image" content="https://i.imgur.com/QzdVah9.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:description" content="Browse through genres of movies or search for a particular movie title and find out if they are available for rent or currently being streamed online."/>
<meta property="og:url" content="https://movie-hunt-demo.vercel.app/" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:type" content="website"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Londrina+Shadow&family=Overpass:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Yellowtail&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4dd3342d23.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="%sveltekit.assets%/styles/global.css" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico?v=2">
<link rel="shortcut icon" sizes="32x32" href="/images/favicon-32x32.png?v=2" />
<link rel="shortcut icon" sizes="16x16" href="/images/favicon-16x16.png?v=2" />
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png?v=2">
<link rel="mask-icon" href="/images/favicon.ico?v=2" color="#000000">
<link rel="android-chrome" sizes="192x192" href="%sveltekit.assets%/images/android-chrome-192x192.png">
<title>Movie Hunt</title>
%sveltekit.head%
</head>
This is on my footer and where I'm assuming my project is picking up the yellow favicon somehow:
<a class="coffee_a" href="https://www.buymeacoffee.com/rickydlgd" target="_blank" rel="noreferrer"><i class="fa-solid fa-mug-hot"></i></a>
It's really strange. The correct favicon does show up on other browsers as I've tested the site on chrome, firefox, and brave so far. Safari is the only one picking up the yellow favicon from buymeacoffee.
Any idea how I can fix this?
Here's a link to my project: Movie Hunt
Below is a screenshot of what I've been seeing:
Safari has suddenly updated the favicon to the correct one and I didn't change any of the code... I guess it takes a couple days for it to update? Anyway, just leaving this here in case anyone runs into this issue. Waiting a couple days was the answer.
I am trying to add a link to .js file in Pages/_Layout.cshtml However I am getting following exception:
Severity Code Description Project File Line Suppression State Error
(active) CS0103 The name 'antv' does not exist in the current
context Blazing C:\Users\Laptop\source\repos\Blazing\Blazing\Pages_Layout.cshtml 31
_Layout.cshtml:
#using Microsoft.AspNetCore.Components.Web
#namespace BlazingDiary.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="BlazingDiary.styles.css" rel="stylesheet" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
#RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="https://unpkg.com/#antv/g2plot#1.1.28/dist/g2plot.js"></script>
<script src="_content/AntDesign.Charts/ant-design-charts-blazor.js"></script>
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
</body>
</html>
Problems is in this particular link https://unpkg.com/#antv/g2plot#1.1.28/dist/g2plot.js. Was googling for couple of hours without success. Any ideas?
This is solved in .net 6.
In .net 5 (and before) the razor engine appears to stick its nose where it doesn't belong. Luckily there is an easy fix, escape the # as ##:
<script src="https://unpkg.com/##antv/g2plot#1.1.28/dist/g2plot.js"></script>
I was trying to include external javascript and html into my angular app.
Here is the author's tutorial which works in jsfiddle
<!-- header source -->
<script src="https://www.givengine.org/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://www.givengine.org/components/chart-controller/chart-controller.html">
<!-- embed the browser in the web page -->
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
So I did it according for my angular app, added the script ref to index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EpiMiner</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://localhost:40080/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="http://localhost:40080/components/chart-controller/chart-controller.html">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
But I got an "chart-controller is not a known element" error. Not too much experience with angular. Suggestion are appreciated. Thanks
In my app I get error message in console
GET chrome-extension://lncjpblllfcpljbdelleomhnlgdlhhmm/content/styles.css net::ERR_FILE_NOT_FOUND
after every new request, but in the same time I do not see any other issues and application seems to be running correctly. Currently I cannot look up any line in my code files where the styles.css file is mentioned (only App.css and all.css).
Why cannot this file be found and how can I fix it?
Here is an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Welcome to DevConnector!</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Hi am validating my HTML code through w3c validator. But it is showing an error Element head is missing a required instance of child element title.
URL is
http://nitansh.fwd.wf/article/travel/best-all-inclusive-resorts-for-romance/3189783/
while title is Present in the head of the html body
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Best all-inclusive resorts for romance- NowU
</title>
<link rel="stylesheet" href="/static/css/styles.css">
<link rel="stylesheet" href="/static/css/video-js.css">
<link rel="stylesheet" href="/static/css/font-awesome.min.css">
<link rel="stylesheet" media="print" href="/static/css/print.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">
</script>
<![endif]-->
<link rel="stylesheet" href="/static/css/socialsharing.css">
<link rel="canonical" href="/article/travel/best-all-inclusive-resorts-for-romance/3189783/">
<meta name="description" content="Whether for a honeymoon, anniversary, or private escape, these resorts fit the romantic bill.">
<meta property="og:description" content="Whether for a honeymoon, anniversary, or private escape, these resorts fit the romantic bill.">
<meta name="twitter:card" value="Whether for a honeymoon, anniversary, or private escape, these resorts fit the romantic bill.">
<meta property="og:title" content="Best all-inclusive resorts for romance">
<meta property="og:type" content="article">
<meta property="og:url" content="http://nitansh.fwd.wf/article/travel/best-all-inclusive-resorts-for-romance/3189783/">
<meta property="og:image" content="http://www.gannett-cdn.com/media/USATODAY/USATODAY/2013/06/18/1371593281000-Earlyne-s-luggage-1306181810_3_4.jpg"></head>
Just for your information this is what the validator is seeing in your code
<head>
<script src="//cdn.optimizely.com/js/687271175.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="UTF-8">
</head>
You can see this by turning on the show source option in the validator. Maybe it's time to look into progressive enhancement?
Same solution as in your other question:
You are injecting the title element with JavaScript, but the W3C validator does not execute JavaScript.