My github pages site #americano-project.github.io is transferring css files as plaintext, not text/css, causing my browser(firefox 25.0.1) not to load the css.
The css is embedded as so:
<link rel="stylesheet" type="text/css" src="/css/tmp.css" />
<link rel="stylesheet" type="text/css" src="/css/toast.css" />
The code is at a github repo, what is causing the problem?
It should be href, not src (Chrome 33 also did not parse them for me until I changed the src to href).
<link rel="stylesheet" type="text/css" href="/css/tmp.css" />
<link rel="stylesheet" type="text/css" href="/css/toast.css" />
Related
<link rel="stylesheet" href="index.css" >
<link rel="stylesheet" type="text/css" href="index.css" >
<link rel="stylesheet" type="text/css" href="index.css" media="screen" >
tried all of them but it's not working
try using a different name for the stylesheet rather than 'index.css' go for 'style.css' as everybody does.
Make Sure the CSS File is located in the same directory as the index.html and change the reference link to
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
or
<link href="./style.css" rel="stylesheet" type="text/css" media="all" />
Check the path to your file you can try,
<link href="./style.css" rel="stylesheet" type="text/css" media="all" />
This should work if your file is in the same directory.
The path mentioned in the above example does not have a full URL or relative path that begins with "/".
This makes the browser think that the css file is at the same level as that of the html file. Therefore, it may fail to fetch the file correctly.
Updating the path of the css file to either a full URL or to a relative path will solve the problem.
Example:
Suppose that the website is organized into the following folder structure:
/index.html
/css/index.css
/css/main.css
/js/header.js
/js/footer.js
...
/images/hero.jpg
/images/logo.png
...
The call to the css file will work if the link is defined like this, in index.html:
<link rel="stylesheet" href="/css/index.css" >
I initially was loading a page
somePage
And the index.html would render with styling
<head>
..
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
The above code works fine in production. However someone made some changes and deleted the app folder and refactored the code to this:
somePage
And the index.html to
<head>
..
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
Now index.html cannot find the css styling. I tried different relative and absolute paths but nothing seems to work.
Any help?
EDIT: My folder structure is:
When I load my page localy http://localhost:56071/blabla/en/ and then click to navigate to "somePage" I end up on http://localhost:56071/tos/blabla/en/ a page with text and no styling. However, if I try to navigate to http://localhost:56071/themes/basic_themes/blabla/base_theme/bootstrap.min.css it returns a 404. BUT I can access my .css file through this link http://localhost:56071/blabla/en/themes/basic_themes/blabla/base_theme/bootstrap.min.css Can someone explain whats happening here?
After building my web site for a while now, I wanted to see if I could upload it to my domain and see if it was functional from the web.
Now I have this error coming from my css files :
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://www.benny-water.com/Mainscss2.css"
I have been googling for 3 hours straight and haven't found a solution. If I understand it is my server (OVH) that is wrongly interpreting the css files as html or text files but I have no idea where to change this.
my code for the css files looks like this :
<head>
<title> Benny Water </title>
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oxygen"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Muli"/>
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/jportilio.css" />
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/jportilio_style_default.css" />
<script type="text/javascript" src="js/Jportfolio/js/jquery-1.11.2.min.js"/>
<script type="text/javascript" src="js/Jportfolio/js/bootstrap.min.js"/>
<script type="text/javascript" src="js/Jportfolio/js/jportilio.js"/>
<script src="http://code.jquery.com/jquery-latest.min.js"/>
</head>
thank you for your help :)
Looking at your paths there seems to be a mismatch between where your CSS files are located.
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
The /style/Css3.css has a / in front of your path, but the style/Grid.css doesn't.
Your Mainscss2.css link is also closed incorrectly. I would removed </link> and close the tag with /> instead for consistency in your code.
The .css file must go inside the <head> tag, while the .js in the <body> tag. It is a rule but it obviously work anyway also when they all are inside <head> too.
About the path of your .css, are you sure it is correct?
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
there are 3 different paths for 3 .css
Use this scheme:
/var/www/mywebsite/index.php
/var/www/mywebsite/images/favicon.ico
/var/www/mywebsite/style/css/mytheme.css
/var/www/mywebsite/style/css/images/imagesUsedBymytheme.png
/var/www/mywebsite/style/js/myscript.js
of course modify it accordingly, if you are index.php, you would want to link your .css using this code:
<link rel="stylesheet" href="style/css/mytheme.css" type="text/css" >
EDIT:
<link> is a single tag, you can use it as <link rel="" href"" >
I prepared my bootstrap website using visual studio and it works properly.
But when I try to run html file through going in that folder then bootstrap css is not loading.
Can you tell me the reason behind this?
Thanks in advance
Here is my head section
<link href="../font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="../dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="../dist/css/bootstrap-theme.css" rel="stylesheet" />
<title > K.P Facility Management</title>
<link href="StyleSheet.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/png" href="../images/title.png" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
Most probably the paths are wrong. With the "../" before your path, you're going up a level from the root, which will return an error (if you look at the inspector).
Try placing this html in the folder that contains the folders you are going to use files from, and change the paths to:
<link href="dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="dist/css/bootstrap-theme.css" rel="stylesheet" />
Trying to build a webpage. and relative css link wont work. Only direct linking.
Head:
<link href="http://directorym.net/App_Themes/customDarkBlueWAdSense_en-US/customDarkBlueWAdSense_en-US.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://pboo.mobi/corey/articles_media/dmNet.css" />
<link rel="stylesheet" type="text/css" href="http://pboo.mobi/corey/App_Themes/mobile.css" />
test at http://pboo.mobi/corey
when i make it relative:
<link rel="stylesheet" type="text/css" href="articles_media/dmNet.css" />
<link rel="stylesheet" type="text/css" href="App_Themes/mobile.css" />
it wont show up.
Suggestions?
Use the absolute path:
<link rel="stylesheet" type="text/css" href="/corey/articles_media/dmNet.css" />
<link rel="stylesheet" type="text/css" href="/corey/App_Themes/mobile.css" />
Looking at your site and changing page code on the fly with browser, they show up with both relative and absolute paths.
Anyway remember that relative means "relative to the current page path".
You have three options when it comes to url paths:
a) Absolute
href="http://www.mysite.com/myfolder/myfile.css"
b) Relative
href="myfile.css"
c) Absolute with forward slash instead of domain name
href="/myfolder/myfile.css"
suppose the folders articles_media and App_Themesand the html page are all based in the same original folder. The header of the html page can then contain:
<link rel="stylesheet" type="text/css" href="/articles_media/dmNet.css" />
<link rel="stylesheet" type="text/css" href="/App_Themes/mobile.css" />
(note the / before the folder name)
To add to what people have said so far, also consider using the full path but using protocol relative links.
<link rel="stylesheet" type="text/css" href="//pboo.mobi/corey/articles_media/dmNet.css" />
<link rel="stylesheet" type="text/css" href="//pboo.mobi/corey/App_Themes/mobile.css" />
This way you won't have to worry about potential security errors with http:// or https://