CSS selectors repeating multiple times in inspect element - html

Before anybody marks it as duplicate I want to say that I have already checked this "What do repeating css selectors mean when displayed via Google Chrome console log?" but it didn't help because in my case the CSS is written only once in the CSS file but still it show's up multiple times in the inspect element.
I have checked the site in multiple browsers but it has same issue. Here are screenshots I took from:
CHROME:
FIREFOX:
Code inside HEAD TAG
<head>
<title>ABC INC.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Global Changes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php set_include_path( get_include_path() . PATH_SEPARATOR . $_SERVER['DOCUMENT_ROOT'] ); ?>
<link href="/ABC_INC/gchanges/CSS/123.css" rel="stylesheet" type="text/css">
</head>

You have one (or many) <link href=''> tag that refer to 123.css file inside your <body> tag, you have to remove them and keep just one in the <head> tag and it should be good.

Related

How to add emoji to a title in HTML

I want to make the title of my website start with the flag of my country. However, if I copy the emoji itself or its unicode, it doesn`t work. Copying emojis just brings me the name of it in the title, not the emoji itself.
There is only one question about it on stackoverflow, but it was 9 years ago, so maybe something has changed!
Thanks in advance!
Just added as normal. Check the current support.
<!DOCTYPE html>
<html>
<head>
<title>🌎 Title with emoji 🌎</title>
</head>
<body>
<h1> My body title 🌎 </h1>
</body>
</html>
Go to this site: https://emojipedia.org/emoji/
Grab the codepoint for the emoji you want (ex.U+1F600 for grinning face)
Replace "U+" with "&#x" so it will now look like &#x1F600
Throw that into a html tag
Title will now have a &#x1F600 face
Simply copy and paste an emoji from emojipedia and paste it into , you might be copy and pasting from a different website.
<!DOCTYPE html>
<html>
<head>
<title>🏳️</title>
</head>
</html>
the best practice to add an icon to the title is to use a favicon
here is an example
<title>your country name</title>
<link
rel="shortcut icon"
href="logo_location/pakistan.svg"
type="image/x-icon"
/>
in full usage
<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>Pakistan</title>
<link
rel="shortcut icon"
href="logo_location/pakistan.svg"
type="image/x-icon"
/>
</head>
Emojis are not really recognized well in html. You could try using an image next to your title using and just setting it to a really small size.

Why css file is loading a blank page?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content= "ie= edge">
<title>Blooger</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
I have searched a lot, checked my syntax of linking css n times and spelling of style sheet is correct, the folder I am using is correct I don't know the problem, please help.
I'm not sure whether you've not added it here on SO, but your HTML file doesn't contain anything to show. (no <body></body> or anything within it)
As an example, you need to add
<body>
<h1>My Blog</h1>
<p>welcome to my blog.</p>
</body>
Please check status, type and size in network tab of browser developer tool

HEAD inner tags showing in BODY tag

I am building a website using the source files of a previous website I already built. My problem is that the tags that belong to the HEAD appear in the BODY in browsers inspectors (Firefox and Chrome). Here is my HEAD:
<!DOCTYPE HTML>
<html lang="<?php echo $lg; ?>">
<head>
<base href="<?php echo $cfg->getHostDirectory(); ?>assets/cpanel/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico">-->
<link rel="stylesheet" type="text/css" href="../css/playfair-display.css">
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../css/glyphicons.css">
<link rel="stylesheet" type="text/css" href="../css/ts-css.css">
<link rel="stylesheet" type="text/css" href="../css/admin.css">
<script src="../js/jquery.js"></script>
<script src="../js/modernizr-custom.js"></script>
<script src="../js/ts-jquery.js"></script>
<script src="../js/js-admin-create.js"></script>
<title><?php echo $cfg->getTitle($fileName, $lg); ?></title>
</head>
For some reason, I do not understand these tags goes in the BODY at runtime.
I searched on the StackOverflow for solutions but I cannot find anything helpful.
Update:
Update:
Here I see a weird duplicate that does not actually exist in the real file!!!
I had a similar issue with a registration form action to another page (which processed the registration and told the user an email had been sent for them to complete the process) but this latter page appeared to show all the html tags as text!
I tracked it down to a set-up file I had required, which had set the header content-type to application/json, thereby causing the browser to try and treat the response as an AJAX type response rather than a page to be loaded.
I had the same problem when adding a custom <jsdata>-tag to my head. So I think it is due to your <base>-tag. In don't know why you need it but try deleting it or put it at the end of your head because only all the tags after your custom tag will be moved into the body.

how do i add an image in the background in css from a folder?

I have an image, and from what I've seen in W3schools you can just use
body background = farm.jpg
And that works, but it says and I've seen people say this, that it can work with css with
background-image: url(farm.jpg) (with and without quotes)
yet whenever i try it can't find the picture.Do I need to put it in a separate folder?
It depenteds to where is your css file , put your css file and image file into same place, and try below
background-image: url("frame.jpg");
Or you can use / to start from root folder.
background-image: url("/frame.jpg");
Read this.
(1) https://www.w3schools.com/tags/att_body_background.asp
Unfourtunately the background attribute is not supported in HTML5. You must use CSS instead.
(2) You can use the code example form this page, what works:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-image
For example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Your page</title>
<meta name="description" content="The HTML5 page">
<meta name="author" content="Your Name">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<style>
body {
background-image: url("background.png");
}
</style>
</head>
<body>
<p>Test.</p>
</body>
</html>
Hope this helps.

linked css and javascripts appearing inline

I have an odd problem I've never seen before - linked stylesheets and javascript files appearing inline when I browse the source of a page. It only happens online and not in my local development machine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/extend-bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/ >
and so on becomes this kind of thing:
<!DOCTYPE html><html lang="en"><script src="http://1.2.3.4/bmi-int-js/bmi.js?version=1363970337" language="javascript"></script><head><meta charset="utf-8"><title>Pagetitle</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><style type="text/css" style="display:none">/**/.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}.clearfix:after{clear:both;}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}audio:not([controls]){display:none;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}a:hover,a:active{outline:0
and it goes on.
Anyone any thoughts on why this would be happening?
Thanks.
DS
Do you have any compressing software on the server? If you save the page, does it also comes out as 1 line? Maybe it is a setting in your browser.
If you're using IE, browser tools being enabled would cause this.
This is likely a duplicate post of CSS and JavaScript appearing inline in sourcecode