Why dosen't this css file work - html

I was trying to host my css files on an cloud storage service but when I linked it to my website it was not executed,
so i created an small css which just changes background but yet it doesn't works.
It seems there is some problem with its server will you please tell me what could be the problem and how to use it as css
link of css file http://copy.com/Kgs8EaMF71Qa7zqo/style.css
HTML Code
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css" rel="stylesheet" type="text/css" />

https://developer.mozilla.org/en/docs/Incorrect_MIME_Type_for_CSS_Files
At least Gecko has a security feature for this: All stylesheets not from the same origin must be served with text/css.
In fact, you're file is served as text/plain, so the rules in it are ignored.

Due to security reasons MIME type of files hosted on copy.com is served as text/plain
So an normal link like of CSS file from copy.com will not work.
But if you still want to host your css files on this cloud storage service you can by adding ?download=1 after your link so you html should be like
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css?download=1" rel="stylesheet" type="text/css" />
there are several other cloud service like Dropbox,Google Drive where you can host your external CSS files.

I think, it may be due to MIME type, you uploaded assuming it will work as css file but its actual MIME type will be plain type text/plain but required MIME type to make it work as css file is text/css
So It Wont work.

This file worked perfectly for me.
here is the html code with the output.
<html>
<head>
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

Related

Adding a favicon to website through HTML code

I'm just transferring all my files over from xampp's htdocs to my server and now I just need to add a favicon.
I have the icon saved as 'favicon1.ico' and it is a proper icon size 16x16, but I cant get it to work.
This is the code I have for it:
<html>
<title>Server Test</title>
<head>
<h1> Hello World </h1>
<link rel="shortcut icon" href="O:\Intranet\favicon1.ico"/>
</head>
<body>
</body>
</html>
That is the correct location of the icon in the href so I dont see why this shouldn't work.
I've never added a favicon to a site before so that is where my main problem of not knowing exactly what it should look like lies.
Your Favicon path uses a windows style File path as pointed out in the comments.
Ensure the following
favicon1.ico file is present in the package that you are transferring onto the server.
Ensure that the file is accessible over http (try using a browser to navigate to it). The path should be something like http://server:port/app-uri/favicon1.ico
After that as suggested in one of the comments use a relative path such as ./favicon1.ico in the HTML source.
Also I suggest reading up on the concept of favicon http://www.w3.org/2005/10/howto-favicon
Code below should work. Try this.
<link rel="icon" type="image/png" href="http://yoursite.com/favicon1.ico">
Notice that href points to the address of your icon depending where you put the icon.

Can I host a CSS stylesheet on Pastebin?

This is more out of curiosity than anything, but is it possible to save a stylesheet on Pastebin and load it in an HTML document? I tried to do it the way you'd normally link a stylesheet, but it didn't work. Here's the test code I used:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css"
href="http://pastebin.com/0dY5eBga" />
</head>
<body>
<p>This is a test. Will it work? Probably not.</p>
</body>
</html>
The code I'm trying to use is saved at http://pastebin.com/0dY5eBga.
You cannot import stylesheets from pastebin in this way, even using the raw url, because the pastebin server sets a Content-Type header of text/plain on the HTTP response. This will prevent the file from being properly interpreted as a CSS stylesheet.
For instance, Chrome will give the following error:
Resource interpreted as Script but transferred with MIME type text/plain
And then it will refuse to apply your styles.
Please see the following MDN articles for details about incorrect MIME types on CSS files - many browsers block resources with incorrect MIME types:
Incorrect MIME Type for CSS Files
Configuring Server MIME Types
Here is a live example of CSS not working when linked from Pastebin, because the server does not send it with the text/css MIME type:
<link href="http://pastebin.com/raw.php?i=0dY5eBga" rel="stylesheet"/>
<p>This text is not red.</p>

Favicon not displaying in IE on a file:// URL

I'm trying to add a favicon to a (simple) HTML page. It has to work on Internet Explorer only, I don't care about other browsers.
<html>
<head>
<title>Test</title>
<!-- COMMENTS -->
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>
Favicon Test
Download
</body>
</html>
It doesn't work. I tried in order: /favicon.ico, the absolute path in this format \\SERVER\...\favicon.ico, an http://randomDomain.com/favicon.ico http link, Base64 encoding of the .ico file, Base64 of png file but any solution is actually working. I'm 100% sure the .ico file is well designed. I was wondering if this problem is related to the fact that the page is actually hosted on a system where is not running an HTTP server. In fact, if i try to click on the Download link and then I look at image properties, the result is this
(source: xomf.com)
(source: xomf.com)
Is there any solution? Consider that there wouldn't be a problem using an external http link but it doesn't work.
Many thanks

Stylesheets not linked with https

I have a standard page, with the following code on
<head>
<link href="http://path.to/stylsheet.css" rel="stylesheet">
</head>
However when I load the page via https and force https traffic through ReWrite conditions the stylsheet fails to load
Any Ideas?
Thank's in Advance
-C
Access your stylesheet over HTTPs as well.
<link href="https://path.to/stylsheet.css" rel="stylesheet">
All files in a site must be references as https if you intend to use it.
The syntax below allows your stylesheet to be loaded via whatever protocol your site is accessed through (assuming the stylesheet is accessible via http and https:
<link href="//path.to/stylsheet.css" rel="stylesheet" />

Why LESS css does not work on localhost

According to this tutorial my less code should work but it doesn't.
Can you please help me to get my less css to work.
Right now it does not working - Page loads with no applied styles. What am I doing wrong?
The error is:
FileError: 'localhost:1/styles.less' wasn't found (404) in styles.less
But it is there in the root?
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="_/script/less-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="header">test</div>
<h2>test h2</h2>
</body>
</html>
styles.less
LESS
#color: red;
#header {
color: #color;
}
h2 {
color: #color;
}
If you are using IIS you have to add a ".less" extension to MIME type within IIS manager. when you add a new MIMI, enter ".less" as the extension and "text/css" as the MIME type.
Assuming the website is hosted over iis express, Open the file
C:\Users\\Documents\IISExpress\config\applicationhost.config
and search for the tag
<staticContent lockAttributes="isDocFooterFileName">
and add the .less MIME as below
<mimeMap fileExtension=".latex" mimeType="application/x-latex" />
<mimeMap fileExtension=".less" mimeType="text/css" />
<mimeMap fileExtension=".lit" mimeType="application/x-ms-reader" />
Thanks for your help everyone - turns out the answer is that my localhost did not serve the mime type .less
I encountered this issue too.
None of the above fixes worked, however I did manage to fix it when I checked the folder access that the less.css file was stored in.
Adding the IUSR user to have read rights to the folder allowed the file to be distributed correctly.
It seems that your source location of your file is not correct.
<script src="_/script/less-1.4.1.min.js" type="text/javascript"></script>
I have never seen that "_" could be used for navigation. Actually, if the script folder is in the same directory as the html page, then
<script src="script/less-1.4.1.min.js" type="text/javascript"></script>
should be enough to have a working js file on your page.
I'm using IIS 7.5 but this can be the same for other IIS versions:
The mime type for less must be added to IIS. But in my case, I have to add it to "Default Web Site" using IIS Manager, NOT to my application, to be able to load less file from browser.
In my case I already had the mimeType for .less on ISS, so I checked the Web.config file of my web and removed the following line because it was causing a duplication:
<mimeMap fileExtension=".less" mimeType="text/css" />