It's just a simple page for now however the background colour and image do not appear properly on the uploaded site, but are fine in the local files. Moreover, the website appears different when using with and without the www prefix.
[EDIT - I see either a white blank page, or one with a squashed logo in the middle of the page. I've tried with chrome, edge, on mobile and desktop, and with/without incognito mode.]
http://swedge.design/
http://www.swedge.design/
https://imgur.com/fk8UufL [ what it looks like through swed...]
https://imgur.com/aqTTwPP [ what it looks like through www.swed...]
and what it looks like locally
I've checked it using the W3 markup validation service and corrected those errors. I can't see any errors on the console either, and have had other people check, and checked on my phone as well, so it can't be a cache problem.
<!DOCTYPE html>
<html lang="en">
<head>
<title> swedge.</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="/favicon.ico">
<meta charset="UTF-8">
</head>
<body>
<div><img src ="swedge.png" alt = "">
</div>
</body>
</html>
CSS
body
{
background-color: #333333;
}
div {
top:0;
left:0;
}
div img {
position:fixed;
top:0;
left:0;
height: 200 px;
width: 200px;
}
I've had a search around but everything seems to point to either errors in the code, or a cache needing cleared.
As now two other persons mentioned here: For us the online version looks just like your screenshot. This is good news for you, but why did it not work for you but for us?
This is a very usual problem encountered in web development and caused by caching. You most likely opened the webpage before you deployed the final version. Your browser or a CDN server cached the old files and when you reloaded the page after the final deployment those old files broke the web page as the page is now half new and half old.
The easiest way to check for caching issues is to open the web page in an incognito window/tab. The incognito mode does not share the caches, thus it is like you would open the webpage for the first time. After closing and opening a new incognito window, caches are reset again.
In Chrome you can also left click on the reload icon while the developer tools are open and select "hard reload" to manually invalidate all caches and reload everything.
Please not that both methods will not work when the caching issue is caused by a CDN server, as your browser will receive the outdated files again from the CDN. In this case you need to wait until the CDN drops your files from the cache.
You can control this behaviour with the cache control headers (browser and CDN). Shorter or no cache times will reduce this issue but will increase the load on your servers.
Edit:
You mentioned in an other comment that, you already tried incognito mode. This means that the issue is most likely caused by a CDN. You can check the HTTP response headers for caching directives.
Related
I have a simple, local HTML file:
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="myclass">Hello World</div>
</body>
</html>
and a simple stylesheet:
.myclass {
color: #456123;
background-color: red;
}
I am deploying my stylesheet to an outside cloud hosting service (AWS S3). However, when I swap the URL out, the styles don't work anymore:
<link href="https://example.s3.us-east-2.amazonaws.com/stylesheet.css" rel="stylesheet" type="text/css"/>
What do I mean by they don't work? The page doesn't display correctly, none of my styles get applied. The page renders as if there was no stylesheet at all.
I've tested all the obvious things, and then some:
The remote stylesheet is accessible, I downloaded it separately by URL and WGet
The remote stylesheet is the exact same as local, byte-for-byte (no diff)
I have disabled cache in my browser
I have hard refreshed
Per my browser tools > network tab, the browser loads the stylesheet promptly (~200ms)
Per my browser tools > sources tab, I can confirm that the entire stylesheet is there, present as a source and readable
I even wrote a script that I loaded into the body that fetched the CSS stylesheet externally, and using a callback after that, created the myclass div. The styles still didn't apply, even when controlling for latency/race conditions like that.
What could be going on here?
Fixed it! I found a similar problem here, which led me to the answer: when CSS files get uploaded to AWS, they get uploaded as Content-Type: Binary/Octet-Stream for some godforsaken reason. (Madness!)
My browser tools didn't raise that as an issue -- I guess browsers are pretty flexible these days -- but it must've still been an issue for HTML rendering.
So the solution is simple: go into AWS S3, click on the file, and change its metadata to hold:Content-Type: text/css. Or you can also set that metadata programmatically if you're uploading these files via an AWS CLI or SDK.
As an aside, you should do the same for JS files, which also get uploaded as binary/octet-stream. For whatever reason, the browser is still able to execute those fine.
There is an html page that works correctly on any Windows and Android (shows content of iframe). Hosting by Github Pages. It works on iOS version 12.5.1, but no on 14.6 (blank page on Chrome, Safari, Opera). Why?
Tried src with wikipedia - ok everything. The problem narrows down to a combination of iframe and src of apps script (that opens separately correctly)
Assume that the problem was mixed http/https according to post. Just http was in style http://www.w3.org/2000/svg, I changed to https (even removed all styles). No effect.
No log errors, just blank page. Seems like trying to load, but break and stop. I haven't ios device to debug. Feedback user.
If you have iOS 14, can try open this site. What you see blank page or access error?
Error like the next is right. It tell about you haven't access.
Refused to display 'accounts.google.com/…' in a frame because it set 'X-Frame-Options' to 'DENY
If you sign in Google Account and try again, will be error from Google Drive. I have all this on any platform in incognito mode. Don't pay attention to them.
Only interested in the case of a blank screen/stop loading like screenshot below
iOS 14.6
Windows
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Goofy</title>
<style>
html, body, iframe { width: 100%; height: 100%; margin: 0; border: 0; }
</style>
</head>
<body>
<iframe src="https://script.google.com/macros/s/AKfycbzmAfVL_ozEP69vpYvMo3t1Qlc4orPfk7eV5rWT/exec"></iframe>
</body>
</html>
Apps Script render page with XFrameOptionsMode.ALLOWALL
function doGet() {
return HtmlService.createHtmlOutputFromFile('launch.html')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
Cookies for cross-site resources are now blocked by default (iOS 13+). Source. Other platform (iOS 12, Windows, Android) while aren't do this. Such cookies need to verify user on github.io with iframe and google src. That's why I see the blank page on iOS 14.
Solve is go to browser's setting and allow 3rd party cookies.
Thanks Shivam's answer
It’s browser side problem. Due to 3rd party cookies, Safari will block the content. Unless user set on their own, the preference to allow all cookies. Until now, I only know Safari that will do this action. Other browser, i think all okay with content in iframe that come from 3rd party.
You can't frame certain websites, because the server won't allow you for security reasons (Imagine that a random page iframes your gmail and steals all your data). So you will have to modify the macro on google scripts and maybe ask other question for what you are trying to do. X-Frame-Options
i have create an iframe look like this :
<iframe src="https://mychatbot.com/chat?token= adadasdasd>
it doesn't work/load in IOS device
But when i change that iframe to
<iframe src="//mychatbot.com/chat?token=adadasdasd>
And bammm, it work !!! i think we just need get rid of http/https out of our "src"
So I've been working on a website for college and I'm starting to learn PHP but for that I installed xampp and tried to access the website from localhost.
By my understanding, the HTML file and images, even (some) images defined in CSS are loading but the entire CSS file is not, like float and flexbox and some padding, borders, and different types of positioning isn't working as intended. It's definitely finding the CSS file so I don't think there's a problem in my <link> tag in the <header>.
HTML header:
<head>
<meta charset="utf-8">
<title>Home - akiro</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
As Doc-Han Stated this is most likely caching, and its an issue I think most of us have run into during the UI development process.
One thing you can do to get around this, is to open and do your debugging in an incognito window which wont cache files and can be reopened to load new sets if session caching does occur.
Alternatively some code editors have an in-built web server instead for this reason. I've been using Adobe brackets for a couple years now and love it. It serves the pages using an internal Node server and as a result, they have it set up for real time code updates. Changes to the code are reflected in real time which i find helps a lot in dealing with UI development flow for me avoiding issues like this and just the saved 3-5 seconds of refreshing each time i make a change (which adds up when your making 5000 changes Im certain other editors offer something like this as well.
This is just because with Xampp the browser caches your CSS files. This means that if making changes to the file, the browser will still access the cached file rather than the new one. A simple trick is to open the CSS from the local server and refresh the page so that the new CSS will be used.
example open localhost:8080/project/css/style.css and refresh that page
Quite some possibilities why it's not working as expected:
As Doc-Han stated; an old version of the css my have been cached.
You're loading the css from a relative path: style.css. This means the css should be in the same folder as the html file. Maybe the css should be loaded from '/style.css' or '/resources/style.css' or another location
Maybe the css contains some simple typo's so you're applying 'flaot' instead of 'float'
Inspect your page through your browsers developer tools. Open the console. Check if there are there any errors. Check if the css did load, also check if the right version was loaded. Check if the styling rules are applied to the right html elements or are applied at all.
If it is a caching problem in Chrome you can open the dev tools, open the Application tab, click the 'clear storage' menu item and clear site data. Now reload the page. In the network tab you can also click 'disable cache' and reload the page.
Just clear your browser's caches and done!
I just had the same problem but opposite and troubleshooting with Google brought me here.
My server was working perfectly in localhost but when I tried visiting it live via Ngrok or port forwarding, I got broken pages without CSS. I read a comment in this post about visiting the CSS file directly and then refreshing and in doing so realized I couldn't visit a lot of my CSS files, and then realized I set rules in my .htaccess for rewriting. Only leaving this comment so if anyone makes my mistake and finds themselves here like I found myself here, check your .htaccess.
I recently started my first program (very basic) and I ran into an issue immediately!
<link rel="stylesheet" type="text/css" href="gweeble.css" />
Using the code above, I attempted to attach a css stylesheet. In order to make sure it wasn't just me, I copy pasted the code from an example. And to make sure that the CSS was right, I put it in a style tag in the head of my HTML file... it worked. Next, I entered the dev tools in chrome (the browser I'm using. This is on a Chromebook using the caret editor) and the css file wasn't even there!!! If you have any ideas, I really need help!
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="gweeble.css" />
<title>gweeble</title>
<meta charset="UTF-8">
<meta name="description" content="uhhhh">
<meta name="keywords" content="google, grooble, gweeble, bored, I'm bored, Im bored, ugh, uhhh">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
body {
background-color: #4542f4; }
ANOTHER SOLUTION!!!!
Here's another reason why browsers may fail to load your css file....
I've read all the responses here (and on several other sites) but was still failing to have my apparently valid css file loading into my browser (as confirmed using the inspector - right-click over code in Chrome and look at 'sources' tab).
I usually use Chrome but also tried Edge with same results - html5 code ran fine but the layout was not being rendered. Inspection showed that css file was never loaded, never mind executed.
My issue turned out to be that the html code had been copied from on-screen tutorials and pasted into Notepad ++. In the process, I ended up with the wrong speech (") marks, so my guess is that the 'meta charset="utf-8"' statement
was inconsistent with the type of speechmark in the code?
Bottom line is that changing all the speechmarks by simply deleting and then re-typing resulted in a physically different shape of speechmark and working code.
Hope this was helpful....
Are you really sure you are viewing the correct HTML file? You can also check the page source (CTRL + U) to check the markup in your document.
This is usually because of a bad link in the <link> element. Are your HTML and CSS files at the same level in the file structure? If you need to go back up a level you may need to do href="./gweeble.css" Also try doing a hard refresh of your browser (hold the shift key down and click the refresh button if you're using Chrome) to clear the cache. Oh and double check the spelling of the CSS file name to ensure it is a correct match.
I figured it out! My computer was set to auto put my files into a google drive section ☹️. The problem was fixed by simply moving the folder to downloads.
In case you are using node.js, express, and EJS as templating engines
I just found this error on my website and looked here.
The problem I faced is
if you have a CSS file in your public directory i.e. views(in my case)
Note: You can access your CSS file from Browser Dev tools.
Using Chrome, go to Network in dev. section, and then click on CSS file. And check headers.
Make sure when you link any CSS file without any error of
type : "text/css"
Correct href = ""
Now, if you still can't access it,
so the problem may be that your browser may not be accessing the file correctly. Check the path where it should be, and where you had placed.
In my case: localhost:3000/views/css/style.css throws an error
But The actual link should be: localhost:3000/css/style.css worked
So change the href accordingly, and remove extra folders coming between so that your browser can access it directly.
TL;DR
I've read through many questions on Stack Overflow on this issue and I've tried to follow the given advice. Still, my CSS stylesheet will not work in Chrome/Safari but it can work in Internet Explorer.
The only odd thing that I can see about my scenario is my server is returning all files as of type application/octet-stream. I cannot change this aspect of the server. Is there something I can do to interpret my CSS file as a stylesheet in Chrome/Safari and IE?
I have an embedded web server project that I am working on. I have very limited control of the server software and the ability to make page-level settings. All I can do is create static HTML, CSS, and image files that are compiled into the server application.
As such, all files that are returned from the embedded server are declared as application/octet-stream in the HTTP header. This produces warnings in Chrome but no errors.
Initially, I had a problem loading this style sheet in Chrome/Safari but it would work in IE. After reading through a couple questions on Stack Overflow, I found that I needed to change my stylesheet declaration from:
<link rel="stylesheet" href="/styles/index.css">
to:
<link rel="stylesheet" type="text/css" href="/styles/index.css">
When I made this change Chrome & Safari still failed to process the CSS file but IE also started to ignore the stylesheet.
Oddly, if I do not declare a DOCTYPE on my HTML document I can get linked stylesheets to work in all of my browsers. This is, however, not a desirable solution.
My guess is this issue has something to do with the HTTP header declaration and that it doesn't match the type declared in the link element.
What can I do to get this stylesheet to work in Chrome, Safari, and IE while following good web development codes-of-practice (i.e. using doctypes on my HTML files and not embedding the style code in the HTML headers?)
For clarity sake, the relevant CSS/HTML code is shown below.
index.css
html {height:100%}
body {margin:0;min-height:100%;position:relative}
iframe {width:100%;height:100%;border:none}
.hdr {min-width:765px;overflow:auto}
.logo1 {float:left;margin:4px}
.logo2 {float:right;margin:4px}
.menu {position:absolute;top:70px;left:0px;bottom:0px;width:175px}
.content {position:absolute;top:70px;left:175px;bottom:0px;right:0px;}
index.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="/styles/index.css"> <!-- Removed the type declaration so that this would at least work in IE9 //-->
</head>
<body lang="en-us">
<div class="hdr"><img class="logo1" src="/images/logo1.png" alt="Logo #1"><img class="logo2" src="/images/logo2.png" alt="Logo #2"></div>
<div class="menu"><iframe name="menu" src="/menu.shtm"></iframe></div>
<div class="content"><iframe name="main" src="/home.htm"></iframe></div>
</body>
FYI, this is a new project that is being developed from an existing one. The original project did not declare a DOCTYPE on the HTML files. Therefore, all page data was loaded and executed in the browser in quirks mode. Furthermore, the index.htm originally consisted of multiple frames within a frameset.
I am trying to update this application, using correct, and up to date methods for developing web pages. I can make this application work, but I feel that this would be at a sacrifice of future-browser compatibility if I have to rely on browser quirks mode and framesets.
I have tried to close the link tag but that doesn't help. Technically, this shouldn't be an issue since this document is declared as an HTML5 document, rather than XHTML.
It's certainly due to the application/octet-stream content type. I can re-create the issue on my end. Soon as the content type is set to text/css your HTML/CSS load fine.
As a workaround you can use <style> tags for you CSS if you can't get the server to send the correct content type.
I hate to have to answer my own question this way but the problem was most certainly with the fact that the server was returning a content type of application/octet-stream within the HTTP header.
After discussing the issue with management we had to update the code associated with the HTTP processor. This is code that is part of a third-party RTOS and we have been extremely hesitant to making any changes to this code.
However, in this case the need has out-weighed that desire. I've integrated the necessary changes to fix the HTTP header to return a content type of "text/css" for cascading style sheets. All is now right with the world.
I think I'll just chime in here. Not to answer the question, but to confirm the issue and perhaps help people with similar problems.
I had the same problem: an external css file was loaded alright, but it was not applied in Chrome. (Safari and FF were ok about it). So, same problem, slightly different cause.
It turned out that because of a bug in the webserver code the HTTP response contained two Content Types, 'text/html' and 'text/css'.
The solution was to remove the faulty 'text/html' line. It seems Chrome is pickier than other browsers about response headers. Which I suppose is legitimate, but a warning would have been nice.
btw, you can see all the http information for a loaded resource in Chrome, when you open Developer Tools, and select Network. Then click on the file that you want to investigate. (it took me a while to find that)
We had a problems with an iframe wich it's contents was updated by an external javascript routine, the CSS were loaded but were not applied. But updating the body HTML from a routine present in the iframe head worked as suposed to.
This same behaviour was not present in gecko and explorer, but happened the same at Safari browser (webkit)
Hope this could give some light in this curious case.
I would like to add one bit of information that may save some of you some time. It appeared that chrome was not recognizing my CSS either. After reading the above post I reviewed the files in the Developer Tools->Network. Turns out that Chrome was using a locally cached version of my CSS. As soon as I refreshed as opposed to accessing the URL again, it worked!
I'm no expert, but i've made this mistake before, it's rather simple.
You've written:
<link rel="stylesheet" href="/styles/index.css">
If this is a folder in the same directory as your index.html file, then you need to remove the first /. like so:
<link rel="stylesheet" href="styles/index.css">
EDIT: I think someone else mentioned this already, but it may have been overlooked.