I am encountering strange problem while developing a static website for my customer. Every time when I push my changes to the server on my hosting (through to FTP to usuall public_html folder), my customer needs to delete cache of the browser in order to see new changes that I put there. This also happens on other computers with exception of my own. This is head of all my pages
<!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.0">
<meta name="description" content="">
<meta name="author" content="">
<title>STINGPRO s.r.o.</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="css/main.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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.3.0/respond.min.js"></script>
<![endif]-->
</head>
So should I forbid caching in meta header like in this question or problem lies somewhere else?
Your server is most likely sending the Cache-Control and Expires headers when serving up the page and telling the browser not to check for the content. If you cannot control the request headers, you can manually force the reload. See this other question for details on turning off caching.
Related
I am using JSP to create a webpage. I have linked the css file to the jsp page with <link rel="stylesheet" href="css/style_mobile.css" type="text/css">, which is the exact path of the file.
Google Chrome's inspect:
The content of <head> tag in my .jsp file:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="css/ratchet.css" type="text/css">
<link rel="stylesheet" href="css/style_mobile.css" type="text/css">
<link rel="stylesheet" href="css/tablesaw.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/fusioncharts-suite-xt/js/fusioncharts.js"></script>
<script type="text/javascript" src="js/tablesaw.js"></script>
<script type="text/javascript" src="js/tablesaw-init.js"></script>
<title>Mobile</title>
</head>
CSS files:
ratches.css
style_mobile.css
tablesaw.css
The webpage just does not load the css content. Please help.
On your developer tool go to -> Network tab. And Select -> CSS. Reload the page. You will see the list of css files included on your DOM along with its status. From here you can from where the files are loading. If not loading you will find them as red marked with 404 status.
You have to make sure the relative path you used and the directory of the css files are same location.
Well, I solve my problem with inline css, although this is not the best solution.
I made this website bigeyeslion.com years ago with a template. Recently, I changed some text and images. After that the CSS stop working. I test it locally before upload to server, it worked fine. but the css files just wont load on the server. Here is the header
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leon Sun - Creative Designer - Graphic and 3D</title>
<meta name="description" content="Leon Sun, Creative Designer,Graphic, 3D, Display design"/>
<meta name="keywords" content="Leon Sun, Creative Designer,Graphic, 3D, Display design"/>
<meta name="author" content="bigeyeslion.com"/>
<link rel="shortcut icon" href="img/favicon.png">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/style-responsive.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
I put the css files in a folder public_html/css and index is in public_html folder.
Please help, I been struggle with this for days
I find it very strange. I test the site on a MAC with firefox and on a PC with google Chrome at my working place. both of them show the same problem. with F12, it tells me I have 2 img (which I did not use) were missing. But when test at home with chrome it works fine and also working on a cellphone too.
Friends, I am working on making a website in which there is an Index.html page, I have defined the title of that page to be for example "Some title here" and a favicon, both of them are getting displayed on localhost but not on server.
I am using Asp.net MVC but the page is basic html i.e. not razor view or anything. The code of tag of that page is
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Some title here</title>
<link rel="shortcut icon" href="../gfiwebsite/img/favicon.png">
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/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]-->
</head>
Added
I found that when I hit the temp url of the server that I am using, I am able to see the favicon and title but when I map it to my domain which I have purchased from godaddy, the favicon and title just goes away, any idea why?
Any thoughts?
You can use an url helper to generate the link to the favicon. Assuming that you have placed the file inside img/favicon.png:
<link rel="shortcut icon" href="#Url.Content("~/img/favicon.png")">
The ~ indicates the root of your website.
In asp.net, elements aren't the same as in regular .html files.
Do you have the following syntax at the top of your page?
<%# Page Language="C#" Title="Default Title" %>
If you do, you should try to remove the title attribute and see if it works now. If you don't, try doing it ;) (Been a while since I've worked in classic asp myself)
Do you have <head runat="server">? Because <head> doesn't work.
ASP.NET does not use the same flat html as a regular .html file.
If you really want to work without razor and such, this might be an interesting read:
http://www.asp.net/web-forms/overview/older-versions-getting-started/master-pages/specifying-the-title-meta-tags-and-other-html-headers-in-the-master-page-cs
edit: You said it works on a temporary domain but not on Godaddy? Are you 100% sure that Godaddy doesn't have any strange caching enabled?
I have run into this issue a great many times... Webhosts introducing certain types of caching that nearly always interfere with these things.
Also, open your console, and go to "network". Make sure you leave it open and make sure "disable caching" is checked. Now, refresh the website.
I created web application using CesiumJS.
On computers its working just fine, but on mobile just Reloading (Safari) and Error (Chrome).
I get Mac from my friend I use developer tools and see error on mobile (see picture)
I tried some solutions for this, to disable iFrame sandbox attribute, but wont works again.
The web site is:
This is my web site
Can you give me a solution please?
Thanks
I spent 30 hours working on different version of my Web site.
I tried without bootstrap, with bootstrap, with scripts, allow-scripts, everything.
I found a solution!!!!!!!!!
I put all my and tags in tag in my .html document.
Also I used tags from Hello world.html document.
My header looks like this now:
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Molim te radi</title>
<!-- LBOOT -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="Cesium.js"></script>
<script src="CesiumBootstrap.js"></script>
<script src="knockout-3.4.0.js"></script>
<link rel="stylesheet" href="Widgets/widgets.css">
<link rel="stylesheet" href="CesiumBootstrap.css" type="text/css">
</head>
Just this tags is all you (I) need!
Everything works perfectly on my laptop and renders just fine on the browser when adjusting size etc. I've uploaded all files and tried to test on my mobile and tablet, but the my css sheet doesn't seem to be being picked up. My headers are:
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://localhost/mrfcredesign/public/css/mrfc.css"/>
</head>
Can anyone help my sanity?
localhost on your phone is not the same localhost as on your laptop - you need to change the href on your stylesheet to be either just a relative link (e.g. /css/mrfc.css or similar), or an absolute link to an actual server address.