I am having a weird problem.
I am trying to build my github page site. So I am writing my html locally and then push it online to see it.
The problem is that Chrome doesn't recognize my css file when I am opening it locally. When I push the changers online or I am using another browser it work just fine
Here is how I import it on my index.html file:
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
And when I go to the chrome dev tools
css have turned to chinese
Microsoft edge load the css file normally.
I have tried a couple of different things like:
Using another editor
Creating the file in different directory
trying different filenames
Clearing Chromes Cache
Nothing seems to work
I have loaded again a local a site like this and it worked fine.
Any ideas?
Make sure the file encoding is UTF-8. You can use iconv or just in your text editor > save as.
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.
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 have got a website built in CakePHP and hosted on http://thecontrolist.azurewebsites.net. I am using git to update this website. I am using Coco theme which uses Fontello, Font-Awesome and a few other to create CSS icons in admin panel. When I pushed my work first time, the font's wont show on the live server however they show fine on my localhost/wamp server.
I thought there would have been some kind of file corruption while pushing font files through git. Hence I decided to upload font files in Fontello and Font-awesome using FTP. I hard refreshed and it worked. However, after some time it again stopped working.
I add the entire libs directory of the theme to gitignore list and uploaded all fonts in question using FTP once gitignore had been pushed. But it didn't fix the issue and fonts have stopped showing up again, so the gitignore didn't help. Any ideas what's going on?
Following the code:
<link rel="stylesheet" type="text/css" href="/theme/coco/libs/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/theme/coco/libs/fontello/css/fontello.css" />
And you can view the files from linked. One thing I am very sure about is that when I reupload files using FTP and refresh it works but then it stops working automatically after some time so it does not seem like a font filepath issue.
Just don't use buggy fonts. Use more stable fonts like font-awesome.
I'm at the last of my wits here. I've searched through dozens of websites trying to find the answer to this issue, but I have yet to find a solution that helps me.
Here is the top section of my HTML, linking to my CSS file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Sample Page</title>
</head>
For some reason, when I preview my .html file on my browsers, my CSS code is not taken into account.
Just to clear things up a bit, I've already made sure the following are not the reasons for my issues:
My CSS code worked just fine when it was in the HTML within the style
tags. It only stopped working once I put it into its own .css file.
There are no <style> tags on my .css file.
The rest of my HTML is correctly formatted. I have the </html> tag and the <body> tags.
I've tested this page on Chrome and Firefox, and even on a different computer's Chrome. I've even tried running them as an Administrator.
I've checked to confirm that my browsers are not set to Quirks Mode.
I've tried multiple DOCTYPE headers, none have shown any signs of working.
The .css name is correct, and the file location is correct. Both the index.html and the style.css are in the same folder.
I've tried these lines of code in different orders, different formats, I've even tried other peoples' code and nothing works.
I've checked the source code for the page on my browser, and clicking the style.css link leads straight to the file.
The only lead I've gotten is that I clicked "Inspect Element" on my page in Chrome and checked the "Resources" tab, where the HTML is found under Frames>(index.html)>index.html and the CSS is found under Frames>(index.html)>Stylesheets>style.css. If I click index.html, the body is blank, but if I click style.css, the body is, strangely enough, a bit of Chinese text.
Here is a sample of a style.css I've tried:
body
{
background-color: yellow;
}
Even with the CSS as simple as this, it still won't work.
Please help.
EDIT: http://i.imgur.com/SgoFkvw.png
Read my post, you guys. They're in the same folder. The different paths are in the "Inspect Element" mode in Chrome, not in my folders themselves.
Jozef Dúc wrote in the comments (1, 2):
Open css file in some editor for example Notepad++ and change encoding of file to UTF-8
Notepad++, open file, in main menu find Encoding->Convert to UTF-8.Look again in Encoding and option Encode in UTF-8 should be checked and save file. Hope it helps :)
This is what solved it for me.
According to your screenshot
it looks like you have bad encoding in file.
So first add
<meta charset="utf-8">
to your HTML.
Then you must change encoding in CSS files. Open the file in some editor (I recommended Notepad++). In Notepad++, find Encoding in menu and in submenu choose option Convert to UTF-8. Now, look again in "Encoding" and "Encode in UTF-8" should be checked, then save the file.
i had the same issue and this is what worked for me. i realized the .html and .css files where all in one single folder that's why it wasn't working. to solve this,
open the project folder(the folder that contains your html files), in this folder, create another folder called 'styles'. Finally, place the .css file in the style folder and run your site again.
this worked for me. hope it works for you
Try adding this line <meta charset="utf-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
1. Ensure that CSS is enabled in your browser.
1.1 Firefox & Chrome: I recommend using Chris Pederick's Web Developer Toolbar, it is a CSS menu (third from left if you have a newer version where the text labels got KOed).
1.2 Safari: ensure the Develop menu is visible (Edit-->Preferences-->Advanced) and then ensure that Disable Styles is not checked.
1.3 Opera (Real Opera, 12.5 and earlier): Tools-->Preferences-->Advanced [tab]-->Content-->"Style Options" [button]-->Presentation Mode [tab] and ensure that "Page Style Sheet" is checked.
1.4 Internet Explorer: Go to Tools-->Options and ensure that under the "Security" tab that the zone (either Local Intranet (if loading the page from your hard drive) or Internet (if you're uploading to a server and then loading it in a browser) are set to Medium-High.
2. Ensure that your HTML and CSS files do not have a BOM (Byte Order Mark) which is created by Notepad and other Microsoft text editors. You can disable the BOM by using Notepad++ or SuperEdi in the Save As... dialog, you will need to do so for both. NEVER USE MICROSOFT TEXT EDITING TOOLS FOR WEBSITES!
3. Running a local server? Check either the Apache access logs or the Developer Network tab to ensure the style.css file isn't coming up as 404.
My link tags work also without the / at the end of the tag. you can try that.
and you can get to element ispect and that to console. maybe the console can tell you what's wrong.
I'm trying to use Font-Awesome icon fonts via the BootstrapCDN link which I'm pretty sure I have the latest version of:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
I've put this link in the <head> part of my html file and I am trying to get it to work with this simple html code of:
<!DOCTYPE html>
<html>
<head>
<title>Font-Awesome Icons</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>
However it's not rendering. I've tried this code in the latest versions of FireFox (27), Safari(7) and Chrome(33). I've checked that the fa class is on each of the icons I'm trying to call up and also that the fa- prefix is being used as opposed to the old icon- prefix. I've checked my implementation of the code with this video http://headwaythemes.com/using-font-awesome-with-headway/ (although meant for a WordPress theme, in principal the code should work the same) and looked around on stack overflow but previous questions like Fontawesome not loading haven't yielded me any help in solving my issue.
I don't have the fontawesome.otf installed but surely it isn't that if I can see the glyphs when visiting http://fortawesome.github.io.
Should I just download and host the font-awesome files along with my entire future website so I don't have to worry about updating the BoostrapCDN link as well? - Even though I only plan to use a few icons?
The reason it is not loading is because the URI is starting with "//". That signifies that it is a protocol relative path, meaning it will use whatever protocol that page is using. If you open your html locally, then your browser will use file as the protocol, thus trying to access the font-awesome css with "file://". If you access your html using a local or remote http web server, then you would access the page using the http protocol, thus accessing the css with "http://".
Solution:
Change the path of the css or mimic it on your local machine.
Run a local or remote http server and access the page.
For more info:
URI starting with two slashes ... how do they behave?
Such an easier way to deal with this - just add 'http:' in front for the cdn line, and it will work on your local machine, i.e. like this:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Ta-daa!
What Pulkit answered is absolutely correct. Just to add, if you want to create a quick local server, just go to the directory of the html and css pages, and then go to the terminal and type -
$python -m SimpleHTTPServer
Then, go to your browser and go to 127.0.0.1:8000
If it doesn't show up, try changing the homepage of your website to index.html