Complete list of reasons why a css file might not be working
Here is the head of my .html file:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="http://fakedomain.com/smilemachine/html.css" rel="stylesheet"/>
<title>Common Questions</title>
<script language="javascript">
function show(name) {
document.getElementById(name).style.display = 'block';
}
开发者_JAVA技巧</script>
</head>
And my html.css file is indeed where it should be. But I'm getting absolutely no styling whatsoever.
Okay, so now I'm just trying to fix the problem locally on my machine. Here is the head:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="cover.css" rel="stylesheet" type="text/css"/>
<title>Common Questions</title>
<script language="javascript">
function show(name) {
document.getElementById(name).style.display = 'block';
}
</script>
</head>
and now the css:
BODY {
font-size: 18pt;
color:#000fff;
font-family: Helvetica;
margin: 0 9 9 9;
}
table {
font-size: 8pt;
color:#525252;
font-family: Helvetica;
margin: 0px;
border-collapse: separate;
}
th {
font-size: 10pt;
text-align: left;
color:#550055;
font-family: Helvetica;
border-color: #999;
border-width: 0 0 1px 0;
border-style: dotted;
}
td {
font-size: 10pt;
text-align: left;
color:#550055;
font-family: Helvetica;
border-color: #999;
border-width: 0 0 1px 0;
border-style: dotted;
}
.left {
display:inline-block;
font-size: 10pt;
color:#990055;
font-family: Helvetica;
margin: 0 0 5 0;
}
.right {
display:inline-block;
font-size: 18pt;
font-weight: bold;
float: right;
color:#525252;
font-family: Helvetica;
margin: 0px;
}
.question {
display:inline-block;
font-size: 18pt;
font-weight: bold;
float: right;
color:#B452CD;
font-family: Helvetica;
margin: 0px;
}
Okay I've made some progress. The firebug suggestion was really good. I saw that the link to the CSS file was being read as Chinese characters. This was UTF encoding problem so I just opened my files in a text editor and then saved them as UTF-16.
But now it is reading the wrong data from the css file! I have uploaded the css file below, but in firebug it is showing a two liner.
Are you sure the stylesheet is loaded? You can see it using the "Net" tab of Firebug on firefox, or on "Network" tab of the Console of your browser.
(If 1 works) can you have a simple sample style and see whether this is getting applied (and visible in the console)?
Firefox can reject a stylesheet if it is not served with a content type of "text/css". (This is separate from the 'type="text/css"' declaration in the HTML.)
Try:
<link type="text/css" rel="stylesheet" href="http://fakedomain.com/smilemachine/html.css" />
If that doesn't work either, then make sure the URL is accessible, and the content is what you are looking for.
Could it be that you have an error in your CSS file? A parenthesis left unclosed, a missing semicolon etc?
I had the same problem - I changed my text encoding to UTF-16 on my index file and my css file would show up blank when I'd try to load the page in the browser. I figured out by much trial and error that your html and css files have to have the same encoding! I don't know if this would work for you but it did for me.
I stylesheet may not get loaded for several reasons. But the main approach to solve such a problem is as follows:
1. After loading the page, press F12 to open the Developers Console. Check the console for any logged errors.
2. Then you should check the Stylesheet tab and see the list of stylesheets the browser loaded.
3. The URL you're using inside your HTML link tag may be unaccessable, so manually try to visit the stylesheet with a browser and see if everything renders correctly.
4. Any typo inside your HTML or CSS stylesheet may cause the stylesheet from loading.
5. Check for any occurrences of fatal errors before your <link> tag. A fatal error may stop the running code and suspend the page, thus not including your stylesheet.
Hope that helps.
In my case, the problem was with the media option:
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
I solved by removing it:
<link rel="stylesheet" type="text/css" href="css/style.css"/>
Copy the css file's url and paste it into your browser. If it doesn't load the file than you know the problem is in the url.
I had a problem like this! I was able to fix it following
Step 1>>from Abraar Arique post, I went into the console>> Went under Style Editor and found Firefox wasn't loading the updated copy of my css file.
I cleared all history and reload the page then my problem was fixed.
I don't think the problem lies in the sample you posted - we'd need to see the CSS, or verify its location etc!
But why not try stripping it down to one CSS rule - put it in the HEAD section, then if it works, move that rule to the external file. Then re-introduce the other rules to make sure there's nothing missing or taking precedence over your CSS.
I had the same problem, chinese characters were appearing in firefox when uploaded to web server, but not on localhost. I copied the contents of the css file to a new text file. All working now. Must have been a unicode/encoding error of some sort.
I was facing the same problem, but the reason was the styling in the css is wrapped in an ID that is not exist
#navi ul{
color: red;
}
the #navi selector is nowhere in the HTML because i forgot to add it before writing the CSS.
in my case I worked with Less file so I nested it like this
#navi{
ul{
color:red;
}
}
I hope this help to re-check when things doesn't work
New one for you Guys !
During my Gulp minification process
<!-- build:css /css/project-mini.css -->
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/splash.css"/>
<link rel="stylesheet" href="css/header.css"/>
<link rel="stylesheet" href="css/print.css" media="print"/>
<!-- endbuild -->
Last CSS file was for print and the generated output gave me
<link rel="stylesheet" href="css/project-mini.css" media="print"/>
So because of media="print" all CSS rules were skipped !
I had the same problem, and I used the UTF-8 coding for both of my files as follows:
add
@charset "UTF-8";in CSS file and<meta charset="UTF-8">under<head>tag in HTML file. and it worked for me.it makes the same encoding for both the files i.e HTML and CSS.
You can also do the same for "UTF-16" encoding.
If it is still not working check for the
<link type="text/css" rel="stylesheet" href="style.css"/>under<head>tag in HTML File where you should mentiontype="text/css"
If your URL is working and loads the file correctly, and you've said that adding the correct
<link rel="stylesheet" type="text/css" href="yourlink.css">
code doesn't fix it, then the only other problem is that's it's an error in the actual .css file. And to advise you on that, we'd need to see the file.
What you can do though is write one basic <div> tag into your HTML, add in a basic CSS rule into your existing file, then see if you can influence this tag with your new CSS rule.
My simple think you missed type="text/css".
I have another one. I named my css file: default.css. It wouldn't load. When I tried to view it in the browser it showed an empty page.
I changed the name to default_css.css and it started working.
I'm using Wordpress and the stylesheet was set to enqueue to the footer
wp_enqueue_style(
'editor-css',
$stylesheet_directory_uri . '/assets/css/editor.css',
['wp-edit-blocks'],
null,
true // $in_footer
);
}
This resulted in a media="1" attribute getting added to the <link> tag and resulted in the stylesheet being loaded but not applied.
Changed the parameter to false and its working now
I don't know if some people are loading first RESET.CSS:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color: inherit;
text-decoration: none;
}There was an error in my html file. Seems like code editors do not catch html tag errors. While editing the html file, my editor added a closing tag for input which I missed. Removing this solved my problem and CSS file is now getting loaded.
I was facing the issue of css not loading and hard reload worked for me.
Hard reload in chrome => CTRL + SHIFT + R
It may be an invalid Multipurpose Internet Mail Extensions (MIME) (more) type set on backend.
Some solutions like PHP function mime-content-type (more) or Unix command file -ib (more) may return quite unexpected results sometimes like text/plain for *.css and text/x-c++ - *.js.
A debugger (i.e. DevTools) or online validator (i.e. mentioned by @Alexis) may help.
For example, the above validator showed:
I/O Error: Unknown mime type : text/plain;charset=UTF-8
for a *.css file downloaded from a webserver/backend. The webserver passed this MIME type in headers, and since the required type should be text/css the browser ignored the stylesheet even with type="text/css" attribute set in HTML.
Not sure why it happened but, when i was using this
<a href="https://example.com/signup.php/">Create A New Account</a>
clicking on this anchor would show the page and not load any CSS stylesheet
i removed the last '/' and it works now.
<a href="https://example.com/signup.php">Create A New Account</a>
The URL http://fakedomain.com/smilemachine/html.css in your <link> Tag is wrong. File not Found.
The Error is quite funny
By the looks of it, I think the error is in the script function, bro.
document.getElementByIt('name')
The nodes have to be within quotes.
If your stylesheets are linked this shall work with the script.
Also, for stylings, you can try inline CSS or creating tags in .HTML file and put all your styles there.
加载中,请稍侯......
精彩评论