Complete list of reasons why a css file might not

2020-02-09 01:17发布

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!

标签: html css
19条回答
劫难
2楼-- · 2020-02-09 01:25

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.

查看更多
ら.Afraid
3楼-- · 2020-02-09 01:25

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.

查看更多
Melony?
4楼-- · 2020-02-09 01:27
  1. 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.

  2. (If 1 works) can you have a simple sample style and see whether this is getting applied (and visible in the console)?

查看更多
【Aperson】
5楼-- · 2020-02-09 01:28

My simple think you missed type="text/css".

查看更多
做自己的国王
6楼-- · 2020-02-09 01:31

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.

查看更多
叼着烟拽天下
7楼-- · 2020-02-09 01:35

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

查看更多
登录 后发表回答