Firefox can't detect my CSS file, but IE can. Does anyone know how I can fix this?
<!DOCTYPE html>
<html>
<head>
<title>Pathfinder Outage Page</title>
<meta charset=utf-8 />
<LINK REL=StyleSheet HREF="c:\documents and settings\Desktop\Outage_Page\swanstyle.css" TYPE="text/css">
</head>
Don't use an absolute, local path to your CSS. Just put in a relative one.
So if your CSS file resides in the same directory as the HTML file, just use:
<LINK REL=StyleSheet HREF=".\swanstyle.css" TYPE="text/css">
The location of a file on your disk is not an appropriate value for an href element. If you want to pull in a file from the disk (and, again, I think in most cases you don't want to) the proper syntax is
<link rel=StyleSheet href="file:///c:/documents%20and%20settings/Desktop/Outage_Page/swanstyle.css" type="text/css">
Try this:
<link rel="stylesheet" href="C:\Documents and Settings\Desktop\Outage_Page\swanstyle.css" type="text/css" media="screen" />
PS: use relative paths!
Don't use UPPERCASES, and use local links
<link rel="stylesheet" href="..\Outage_Page\swanstyle.css" TYPE="text/css">
Try including it like this:
<link href="file:///c:/documents and settings/Desktop/Outage_Page/swanstyle.css" rel="stylesheet" type="text/css" />
Related
I am wanting to link a stlyesheet to my html doc, but it is not applying to my website. When I had the same css as an internal stylesheet, it worked fine but will not work as an external page. Attached is a screenshot for reference
You can try change with this way:
<head>
<link rel="stylesheet" href="styles.css">
</head>
change sylesheet to stylesheet
You can try this way.
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
I have many HTML pages, like so:
...
http://www.mydomain/app/library/index.php
http://www.mydomain/app/library/admin/admin.php
...
I use an external file to include the <head> in my html, like so:
<!DOCTYPE html>
<html lang="es_ES"><?php
include("path/to/html/head/head.php"); ?>
<body>
</body>
</html>
the head.php looks like
<head>
...
<link href="" rel="stylesheet" type="text/css">
</head>
Let's say i want to link the css file in head.php. Should i use absolute path with domain for links, like so
<head>
...
<link href="http://www.mydomain/app/library/common/css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
or, should i use absolute path without domain, like so:
<head>
...
<link href="/app/library/common/css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
I don't think i can use relative paths (or maybe i should... i don't know).
Personally, i like the absolute path without domain... But i want to make sure it's done correctly the first time.
Are there any pros/cons on using absolute paths with or without domain?
You have to give full path with domain like this.
<head>
...
<link href="http://www.mydomain/app/library/common/css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
If you give path as below,
<head>
...
<link href="/app/library/common/css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
then it will find in the local, so you have to give with domain.
Please help, i really cannot see what i am doing wrong. I have tried all permutations and still cannot link so have started to write css code in html. Not what i want to do. Been looking at it too long and hoping someone can see my error. Thnks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
My file tree is my directory folder name of the project then a sub folder css, then the style.css
Assuming your index file is in the root directly below the css file, you need to write "./css/style.css" - you're definitely not pointing to the right location.
<link href="./css/style.css" type="text/css" rel="stylesheet">
Try This:
<link href="../css/style.css" type="text/css" rel="stylesheet">
OR
<link href="/ProjectName/css/style.css" type="text/css" rel="stylesheet">
If you want to link to your stylesheet and it is not working, navigate to your stylesheet (it should look like http://www.example.com/css/style.css) and then copy the URL to your <link rel="stylesheet"> tag so it looks like this:
<link rel="stylesheet" type="text/css" href="http://www.example.com/css/style.css">
instead of this:
<link href="css/style.css" type="text/css" rel="stylesheet">
Hope this helps!
I have a problem where my css does not affect my html. I made a fiddle here
It worked when I wasn't trying to connect an external stylesheet and used style tags,
Thanks in advance to anyone who can help.
btw i tried
<link rel="stylesheet" type="text/css" href="index.css">
and it did not work.
Make sure you are linking it in your 'head' section of the HTML such as this:
<head>
<link href="index.css" type="text/css" rel="stylesheet" />
</head>
Also be sure to close the tag and that the style sheet you are linking is named 'index.css'
Edit:
HTML is split up into two main section tags: body and head. In a normal HTML page, the structure is like so:
<html>
<head>
</head>
<body>
</body>
</html>
The code I referenced at the beginning of this answer should be placed into the head section of the HTML page.
The fact that you are linking to simply index.css worries me. Is index.css in your site root? If so, specify that:
<link rel="stylesheet" type="text/css" href="/index.css">
As stated also by BuddhistBeast, check to make sure it's in between the head tags:
<head>
<link href="index.css" type="text/css" rel="stylesheet" />
</head>
Also check that you are referencing it correctly. If it is all in one folder, then
<link href="index.css" type="text/css" rel="stylesheet" />
is correct.
If it's in its own folder, named "css" for example, it should be written as:
<link href="css/index.css" type="text/css" rel="stylesheet" />
You put #button instead of input, #button in the css.
<head>
<title>Water Bureau</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/main.css" type="text/css" media="screen" title="Main CSS">
<link rel="stylesheet" href="custom.css" type="text/css" media="screen" title="Custom Styles">
<script language="JavaScript" src="/shared/js/createWin.js" type="text/javascript"></script>
</head>
Thats the code, but the "custom.css" isn't working. It doesn't work at all. If we add a #import into main.css OR into the header instead of a it works fine though. Any ideas? We also got rid of the media="screens" on both as well.
The CSS inside of it is working fine, it's just when we stack those two, the first one parsed is the only one read by the browser. So if we swap main below custom, custom than works but NONE of main works. and custom just has snippet of CSS, and doesn't override all the CSS in main, just 1 element.
I can't figure it out! We have other ed stylesheets in the head (which we took out for trying to fix this) and they worked fine...
Like hsource said, try validating both css files.
http://jigsaw.w3.org/css-validator/
Also just try this, without that title thing with both css files in same folder, both relative to the page which is importing them:
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/custom.css" media="screen" />
It also might be that because you are not using any doctype and also you are not closing your link tags, something related to that might be your problem. So try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/custom.css" media="screen" />
</head>
There's a two places that I think may be the problem:
The href for custom.css currently points to a location in the current directory of the HTML file. If custom.css is in the /css directory like main.css, you'd have to add that. The file is included when you use an#import tag because the #import is relative to main.css, and it can find custom.css in the same directory as main.css
There's an unclosed CSS tag or something that is breaking all the CSS coming after it; this is pretty unlikely, but you can verify your CSS with the W3.org CSS validator.
This might be due to the way CSS handles style precedence, but might as well be caused by bad markup. Try validating your document or using an absolute path for the custom.css stylesheet.
GaVra, you were right about the doctype, etc. We should have known that, given the HTML5 doctype was being used and probably isn't quite ready for action.
Thanks!