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.
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
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 am trying to create a html simple website on IIS that will help downloading files.
<!doctype html>
<html lang="en">
<head>
</head>
<body>
Start automatic download!
</body>
</html>
This is running file. On clicking "Start automatic download!" it is downloading newUpdater.xml in browser. But, If I directly give this download link in browser (below), it is opening the XML file in all browsers(chrome, firefox).
http://169.254.68.202/newUpdater.xml
Any Idea How to fix this. I think this is possible as
http://dl.google.com//googletalk//googletalk-setup.exe
this link on browser will start downloading gtlk directly.
Having a problem with an svg file not showing up in my background after its been uploaded to a server I'm using. Made sure the file permissions allow it to be readable on the server and when I open my html file on my computer you can see it, but if you go to the url it doesn't show. Only browser we're working with is chrome. Any ideas? Seems strange since I didn't change anything before I uploaded it. Here's my CSS:
.paradox{
background-image:url('paradox.svg');
background-repeat:no-repeat;
background-size: cover;
}
and my html using the CSS:
<html>
<head>
<title>Homework 5</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="paradox">
<p class="spacing">
<iframe class="resize" src="form.html" frameborder="0" >
</p>
</body>
</html>
Make sure the SVG file is delivered with the correct MIME type. Open the developer tools, go to the Network tab and load your page. Open the URL of your SVG file and make sure the Type column says image/svg+xml.
If the MIME type is not correct, then add the following line to an .htaccess file in an ancestor directory of your SVG file:
AddType image/svg+xml svg
(assuming the server supports .htaccess files).
You probably have the wrong file path. Press F-12 to open the debugger, open the NETWORK panel and reload the page. Look for a 404 error on that filename.