This problem is making me feel like an absolute noob.
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';
}
</script>
</head>
And my html.css file is indeed where it should be. But I'm getting absolutely no styling whatsoever. Help!
And please don't down vote just because the answer is obvious and I can't see it.
EDIT 1
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;
}
EDIT 2
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.
I find this baffling!
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 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.
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, 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 mention type="text/css"
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 !
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.)
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.
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.
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
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"/>
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.
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.
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 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;
}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.
My simple think you missed type="text/css".
The URL http://fakedomain.com/smilemachine/html.css in your <link> Tag is wrong. File not Found.
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.
Source: Stackoverflow.com