CSS works with FF and IE, but not Chrome - html

I know this is probably one simple mistake I'm missing, but a second set of eyes would be great. The following HTML and CSS is connecting on Firefox and IE, but not Chrome. I'm testing it with the font size. It is like Chrome is ignoring the CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Put A Title Here Later</title>
<meta name="description" content="What is this about?">
<meta name="author" content="My Name">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Test</p>
</body>
</html>
CSS:
p {
font-size: 100px;
}

Chrome likes to cache stylesheets. That's the only thing I think would be different here given the code provided. When you have this page loaded in Chrome, try pressing Ctr + Shift + R for a hard reload.
If that doesn't work, press F12 to open the inspector, then go back to your main browser window and click and hold the reload button until a sub menu pops up. From there select "Empty Cache and Hard Reload".
Also, be sure that you have actually typed this CSS and not copy and pasted it. It's rare, but I have seen a copy-and-paste introduce hidden characters that caused strange browser errors.

Related

A div added on the page witohut even having it in the code

I'd like to get some help. The problem is that I continue getting a "div" on my web page without even having it in my code. If I style the "div", for some reason, it appears without being even presented in my code, and it appearts at the bottom of the page. And if I add "div" then it's doubled without any spacing.
I know the question might be really stupid, but I don't really know what to do.
Below you'll find the code and the link to the sreenshot.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bullet-icon.css">
<style>
div {
background-image: radial-gradient(red, pink);
width: 500px;
height: 300px;
}
</style>
</head>
<body>
</body>
</html>
I have checked it in last opera, last chrome and ie 9 - there is no this issue. Seems like it is done by some extension of your browser, browser itself, or http server which you are using.
Try to change browser, then:
if issue still here - check your http server
else - check your extensions

Why is browser loading CSS/JS/img assets in unexpected order (not the order of HTML source)?

My understanding
So my understanding is, if you have a website with the following source:
<!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>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<script src="script-head.js"></script>
</head>
<body>
<img width="400" src="image.jpg" />
<script src="script-closing.js"></script>
</body>
</html>
...the browser will queue the assets to be loaded in the following order (the order they appear in the page source):
style.css
script-head.js
image.jpg
script-closing.js
I have tested this simple HTML page in Chrome Dev Tools Network tab and the assets do load in that order.
All makes sense to me. So far so good.
The confusion
But in practice, I'm working on optimising the Largest Contentful Paint score of a website (if at all relevant, though I don't know how/why if we are just talking about page load, it's a Shopify website...). So I need to load the largest image on the screen quickly. And the loading isn't happening as I expect.
If we take this site as an example (this is not actually the site I am working on, but it seems to be happening on all the "larger" sites I've assessed. This one is Shopify too): https://www.luxyhair.com/
It has images (eg. //cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052) that are queued in the Network tab after JS scripts that are below it in the page source (eg. //cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370).
I'm not sure why this is happening.
<!doctype html>
<html lang="en">
<head>
....
<link href="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.css?v=10166822434284191108" rel="stylesheet" type="text/css" media="all" />
....
</head>
<body class="theme-index">
....
<img class="one-whole" src="//cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052" alt="" />
....
<script src="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370" type="text/javascript"></script>
....
</body>
</html>
My fundamental confusion here is why the browser is queuing assets not in the order they are listed in the HTML source.
How I can get an image to load before a bunch of JS scripts that are in the footer that aren't as important? I know about <link rel="preload"> but I can't use that as the image is defined in a page section that's not available for me to capture until after the <head> of the page (because of how Shopify's section templating engine works). I've tried inserting a <link rel="preload"> into the with an inline script, but as expected that hasn't worked. I have also tried adding importance="high" on the img tag. That also hasn't worked.

Firefox renders HTML before applying CSS

I'm running a simple Flask server on Ubuntu, basically a beginner with web apps. When I request a page through Firefox, the screen flashes briefly with the raw HTML before the CSS is applied.
I thought this was a problem with the way the CSS is specified in the HTML (as I found in a few suggestions) but it doesn't seem to be the case because my other browser Brave doesn't have this problem, not even when the CSS resource is requested for the very first time or if I disable caching from the Network tab and refresh repeatedly. It always loads correctly without any flashing or flickering (to my eyes anyways). Below is the current HTML head.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flask Auth Example</title>
<!-- <div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div> -->
<link rel="stylesheet" href="../static/styles/bulma.min.css" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" /> -->
</head>
Has anyone experienced this issue and is it browser specific? What is the simplest way to resolve it?

My CSS file won't link and I don't know why

I'm trying to link p1.css to p1.html, but for some reason it's not working. It's in a file on my desktop called 115, and in a file inside called css, but no matter what I add or take away it won't show up. What am I doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<title>CIS 115 - Project 1</title>
<p lang="en"></p>
<meta charset="utf-8">
<meta name="Project 1" content="">
<meta name="Kim Peoples" content="Kim Peoples">
<link rel="stylesheet" type="text/css" href="115/css/p1.css">
<script src="115/p1/p1.js"> </script>
</head>
this is the css, which is I'm in the process of making but I want to make sure it links first.
body {
background-color: green;
}
Im assuming that you are viewing/accessing your file via desktop. Though not clearly sure if you are using localhost server or not. Here's what I think what was your file tree flow..
/115
-/css
-- p1.css
-/p1
-- p1.js
- index.html
Then in your HTML, it should look like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CIS 115 - Project 1</title>
<meta name="description" content="Kim Peoples - CIS 115 Project">
<link rel="stylesheet" type="text/css" href="css/p1.css">
<script src="p1/p1.js"> </script>
</head>
Note: Since you are initiating the index inside your 115 folder, you don't have to include 115 folder to your internal files. Just simple append the folders of your media files and CSS/JS files.
first you have to press ctrl + u on browser window and check css path
has been coming or not? after click it css will be display properly
or not ?
if still issue then check with inspect element in browser. press f12
in browser window.
still issue then you can use element property in !important; in css
code
Maybe try ../115/css/p1.css?
Seems like your absolute path is incorrect.
Here is a link to more information about absolute paths and relative paths:
Absolute vs Relative Pathlinks
Hopefully this is helpful to you.
Happy Coding!

Multiple Html <head> in the browser , caused by DreamWeaver bom

I am using DreamWeaver to code xHtml docs. in the program the code is valid but when I upload it in the inspect element I see double <head> tags and when I right-click to see the source file it seems o.k.
Is it because I'm using dreamweaver? what can be wrong?
the first error is : "Extra <html> encountered. Migrating attributes back to the original <html> element and ignoring the tag." - in line 3
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="the content of my doc" />
<meta name="description" content="this is an example document" />
<link rel="alternate" type="application/rss+xml" title="rss feeds" href="linkto/xml/feeds.xml" />
<!-- scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>The Title</title>
</head>
<body>
<!-- content -->
</body>
</html>
Thank you very much.
No problem in Chromium 5.0.307.9 (Developer Build 39052) under Linux. I can't test it in Safari now.
EDIT: Proposed test case had nothing to do with this problem, neither could see any extra <head> tags. However, I looked at the Developer Tools of Safari and Chrome under Windows and Firebug in Firefox and all three rendered the DOM incorrectly. Just have a look at this picture and see that the first <link> tag has jumped into the body.
This problem also has nothing to do with Javascript because when turning off Javascript the result is the same, even more clear when comparing with the source code. Strange I didn't notice this under Linux.
The Developer Tools of the WebKit browsers give an even clearer picture (also notice the jQuery error message). I suspect the Unicode Byte-Order Mark (BOM) at the beginning of the file causing the problem: as you can see the BOM is moved to the <body> of the document, perhaps dragging several elements in the <head> with it. But also the unclosed <link> elements, as shown by the W3C validator, might give some issues, although browsers usually handle this without any problems. First get rid of the BOM in your file and see if the problem persists.
And I see another error: those tags beginning with <meta ... are called meta tags, not "meat tags". ;-)
You should have a title element what you write between
the <title></title> tags will been displayed in top bar of your browser
Just make sure your
</head>
tag has the slash in the actual file you're working on. That's an easy typo.
To remove BOM from your document, you can use this php function:
function removeBOM($str=""){
if(substr($str, 0,3) == pack("CCC",0xef,0xbb,0xbf)) {
$str=substr($str, 3);
}
return $str;}