Occasionally on my websites, I notice an external file won't be loaded. If I rename it and point to the new name it works fine. The old name refuses to work ever again.
Usually this happens with images, but today it happened to a css file. It happens spontaneously and unpredictably. When it happens to images they won't load by themselves in a browser window either. The css will load by itself, but won't be loaded by the page linking to it.
Here are 2 pages which are exactly the same, except they link to 2 differently named css files. The css files are identical, except for their names.
working - http://internetfind.com.au/test2.html
not-working - http://internetfind.com.au/test1.html
The web server is Apache.
Why does this happen and how can I prevent it?
i see on test1 the css file is not loaded as text/css but text/html. I also notice that you are running 2 different domains both running Apache. any chance you have 2 different .htaccess files? I am just speculating here as I dont have all the information but my guess would be the root directory running the test1 domain has a htaccess file where the MIME type are not defined right.
here is a link to a sample .htaccess file that comes with the html5 boilerplate distro. https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
Another error is that Mordernizr is not defined which probably means that you have not linked the mordernizr library.
My Firefox console reports this:
The stylesheet http://www.agedcarefind.com.au/styles/styles-church.css was not loaded because its MIME type, "text/html", is not "text/css".
This suggests that your server isn't configured correctly and is serving the CSS with the wrong mimetype.
I can confirm the Firefox is requesting the file correctly, and it's being delivered - just not actioned.
test1.html is looking for this CSS
<link href="http://www.agedcarefind.com.au/styles/styles-church.css" type="text/css" rel="stylesheet">
This CSS file is ending with
#prev{position:absolute;z-index:101;height:100%;…
Somwthing is wrong with the file, try to edit it and it should work fine
e.g:
#prev{position:absolute;z-index:101;height:100%;}}
First of all, incorrect content-type for css files Resource interpreted as Stylesheet but transferred with MIME type text/html
Second - Uncaught ReferenceError: Modernizr is not defined
Content-type affects visualization of styles. May be you have some front-end server that changes content-type. Or your files are returned by server-side script - not enough details to answer clearly.
Based on the content of .css files I would say that you have some css compressor (removes white-spaces, new lines, reducing the size of .css file) running on server and may be it affects the content-type header.
Related
I'm hosting an ASP.NET website on Local IIS (not IIS Express), and as soon as I save a change to a .css file in Visual Studio, the change immediately appears in browser windows that use that file (or after mousing over the window in Chrome), without clearing caches and refreshing.
Why do the changes appear immediately?
Opening the .css file itself (not a page using the file) in the browser shows a more expected result: saving the file in Visual Studio does not change what I see in the browser until I refresh the .css file.
As it turns out, I had Browser Link enabled in Visual Studio, and with it, CSS Auto-Sync. This opens up a port on the local machine and uses SignalR to communicate with the browser window about 400 times per second, including any CSS changes needed.
For more information, see these topics:
.net localhost website consistently making get arterySignalR/poll?transport=longPolling&connectionToken= calls
How can I disable __vwd/js/artery in VS.NET 2013?
This probably happens due to caching. when you open the css itself, it retrieves a new copy from the server, but when you open a page that uses the css file, the css file is being cached as the page's resource and the browser just shows the cached resources until you force it to reload them.
a trick i learned to fix the issue, is to link the css file to the aspx page and include a random query string to the linking, that way it tricks the browser to think that its a new resource and reload it from the server anyway.
like this:
<link href="../stylesheets/MyCSS.css?<%=DateTime.Now%>"
rel="stylesheet" type="text/css" />
we use the aspx preprocessor directive <%=DateTime.Now%> to append the current time as a query string, to ensure the link is always different.
Dont forget the question mark between the css filename and the preprocessor directive
I'm developing a Chrome extension that has an options page. And I am willing to style this page same as Chrome options page is styled. I found that there is a file
chrome://resources/css/widgets.css
that holds this style (it is listed in "Developer Tools > Sources"). However, if try to load it in my page either directly from HTML
<link rel="stylesheet" href="chrome://resources/css/widgets.css" type="text/css">
or from CSS
#import url("chrome://resources/css/widgets.css");
then get this error printed in the console:
"Not allowed to load local resource: chrome://resources/css/widgets.css
It looks like I'm missing some permissions in my manifest.json, but did not find anything suitable on the developer's pages (notice it lists "chrome://favicon/", but that's it).
Anyone knows a solution?
P.S. Yes, I have copied this file into my extension's folder, and I got what I want, but the smart and proper way using this file (IMHO) is loading it directly from Chrome resources.
Short answer: No, you can't access chrome://resources... from an extension.
First, it's blocked on purpose, thus why you see "Not allowed to load local resource." Second, you really shouldn't rely on Chrome's resources, which can change in any version.
In the head section of the sample html file from the html5boilerplate project, I notice this:
<link rel="stylesheet" href="css/style.css?v=2">
Note the v=2 request variables. I also notice that this is never done for javascript files.
What is the actual function of doing this ?
The ?v=2 might be to prevent reading from cache by the browser. It's used when loading dynamic content from a static file, like so:
changingListOfStuff.txt?randomUselessPropertyToTrickBrowser=123456789
This forces the browser to use this exact file, not a cached version of changingListOfStuff.txt previously downloaded and stored by the browser. Caching speeds up loading time, but might provide an older version of the file if it changes rapidly.
Read more about caching here: http://en.wikipedia.org/wiki/Web_cache
this is just telling the version of the url. This is done to make a fresh request to the server.In case of css as we know to achieve performance some headers are modified so that next time css is served by the browser history.But every time a css is modifed specifically in case of version releases. Browser should make new requests that would happen only when the url changes. So v=2 probaly means a new version is in and the url should freshly fetch the content from css.
This is called cache busting...you can read it here too
http://manikandanc.blogspot.com/2005/11/cache-busting-with-javascript.html
this will avoid client to get the version from browser. When you change the javascript or css , the end client who already visited your website may get javascript from his cache.
You can increment the version no whenever you deploy the files to the production , so that it will get the latest file
in order to find the server spec. i've created a file in the root dir in my website called spec.htm and entered this content as i was offered by another user:
<html>
<head>
<title></title>
</head>
<body>
#ServerInfo.GetHtml()
</body>
</html>
but i only get a copy of the code in my browser and it doesn't run it,
what the problem might be?
EDIT: i think that the problem is that i'm not using IIS.
is there a way to do so without using IIS?
thanks
Please see the following article
http://www.asp.net/webmatrix/tutorials/14-introduction-to-debugging
The ServerInfo helper is a diagnostic tool that gives you an overview of information about the web server environment that hosts your page. It also shows you HTTP request information that is sent when a browser requests the page. The ServerInfo helper displays the current user identity, the type of browser that made the request, and so on. This kind of information can help you troubleshoot common issues.
Create a new web page named ServerInfo.cshtml.
At the end of the page, just before the closing tag, add the following highlighted code.
#ServerInfo.GetHtml()
Note, it appears as though this is designed to run in IIS only and not on Linux / Apache servers.
Note, this is a RAZOR syntax so your system needs to be able to run Razor by installing the WebMatrix
#ServerInfo.GetHtml() is a Razor view engine syntax. Try saving your file as .cshtml or .vbhtml
The problem is that your webserver is not set up to serve HTML files through the ASP.NET interpreter. Change the extension to .aspx (i.e., use the same code, but call it spec.aspx).
Are you setting the Content-Type header correctly. If not set to text/html or similar, the browser or framework may set the content-type to text/plain which will not render the html at all.
You can check this in Firebug in the Net tab, expanding the response that is associated with the page you are serving, and looking in the Headers tab. If the Content-Type header is anything besides text/html or text/xhtml, then you need to find a way to make your web server set that header properly
let me guess its just showing up "#ServerInfo.GetHtml()" on a webpage. This does nothing if you put it simply in a body tag of a html page. If you are running IIS make sure you are saving as .aspx and not .html
See "yourhtmlsource.com/myfirstsite/myfirstpage.html"
I hope I am understanding the question and this helps. I found it on the web page given above.
When you double-click a file on your computer’s desktop, the computer knows what program to open the file in by checking the file’s “extension”. A txt file will open in a text editor.
You need to give your document a file extension of ”.html”, which will tell it to open the file in your web browser, such as Internet Explorer, Firefox or Safari.
Right now you should be editing your HTML page in a text editor, which normally saves files with the extension “.txt”. We want to make it save in “.html”. In your text editor click File → Save As…. If you use Microsoft Windows, there will be a box labelled “save as type”; change it to “all files .”. This means that you can save the data (in this case, some text) into any format. Now type in the name index.html for your file and click save. Ex: file.txt becomes file.html.
The title of this question may be a bit misleading. I couldn't quite think of anything better.
Here is my problem. I am developing an Apache module that needs to manipulate a bit of content in the requested HTML document (this document can be a file on the disk or may be dynamically generated by CGI or PHP) and so I am using libxml2 with it.
I developed something working, but the problem is that when the browser requests for a page, let's say
http://localhost/a.html
the module does it's job. But if that page has references to a javascript file, a.js, or a stylesheet file, a.css, they are not getting served.
The reason as I perceived by examining the logs is that, as the browser sends requests for a javascript file let's say
[http://localhost/a.js] //putting [] because of limit of 1 url per post.
Apache again runs my module, the module uses a HTML parser, so when the content is not HTML, it gives error and exits, the request is abandoned.
How can I make my module to work only for text/html requests ?
I don't know how to make your module to decline the request. But if you don't figure how to do it you can just configure it in httpd.conf
AddHandler my-handler .html