Reputation: 6064

css file path is right, css code is valid, but it doesn't work

I have a weird, annoying problem. I have a css/ folder and index.html at the root. I load css files in the header as follows:

<!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" xml:lang="en" lang="en">

<head>
    <title>blabla</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="keywords" />
    <meta name="description" content="desc" />

    <!-- style files -->
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/global.css" media="screen" />
</head>

but the css is not working: I see a plain index.html. I'm sure the css path is right; when I click "view source" and copy/paste the css files path, it shows the css files.

Also, when I copy the css directly into index.html, it works. What could be the problem?

Upvotes: 4

Answers (18)

Luis Ramirez

Reputation: 3

For anyone experiencing this behavior in an environment that was published to the web, I would recommend attempting to view it in a different browser or in your phone. I experienced this behavior in Google Chrome through my personal computer and confirmed that my console was blocking the css elements from being viewed. I hosted my website in Filezilla to be specific.

Upvotes: 0

Jas

Reputation: 71

Try this

<link rel="stylesheet" type="text/css" href="../css/reset.css" media="screen"/>

  <link rel="stylesheet" type="text/css" href="~/css/reset.css" media="screen" />

Upvotes: 1

Salamander115

Reputation: 29

Try using the format of:
<link rel="stylesheet" href="/css/file_name_here.css" type="text/css" media="screen">
etc. Though it shouldn't, it may be the order of the parameters that is causing it. This is the order i use and it has always worked for me. I also noticed that you have three <!DOCTYPE> declarations, is this necassery and could it be the cause of this? I have researched and
found that only one is permitted...

Whether or not they are the causes or not, i hope you find the solution soon!

Upvotes: 1

Jean-François Savard

Reputation: 21004

This solution will help only if you are trying to deploy on web, not on a local environment but since there is a lack of detail here, I wanted to specify.

I remember having the same problem and I fixed it adding // before the path to the file as the browser need to know it is loaded from web.

You can verify this easily by pasting the url with and without the // before the css path.

For example

xxx.xxx.xxx.xxx/path/to/css.css

Would not be loaded while

//xxx.xxx.xxx.xxx/path/to/css.css

Would be loaded.

Other possibilities would be

Incorrect permissions
Wrong path, maybe you are missing something ? Try with a slash at the begining or the absolute path.

Upvotes: 0

JTC

Reputation: 3464

Some suggestions...

According to W3 :

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.

So I suggest using /css/reset.css as path.
<link rel="stylesheet" type="text/css" href="/css/reset.css" media="screen" />

Howewer if this does not work i would try to add whole address of your website.

Does http://www.yourweb.com/css/reset.css show you anything?

If you could use PHP I suggest add this code to your index file like this:

<?php echo realpath(dirname(__FILE__)); ?>

You will see your absolute path.

Also have you been able to duplicate your problem on external test sites like jsfiddle using url path to your css?

Upvotes: 0

user1238367

Reputation: 525

Check the file permissions, you may not have the rights to read the css files. Give read access to everyone.

Upvotes: 0

Ranjitsinh

Reputation: 1339

enter image description here

Please create folder structure as per above screen shot.

I have updated all files and its working as expected now.

index.html
-----------------

    <!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" xml:lang="en" lang="en">

    <head>
        <title>blabla</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="keywords" content="keywords" />
        <meta name="description" content="desc" />

        <!-- style files -->
        <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/global.css" media="screen" />
    </head>
    <body>
    <div id="reset">
        Reset Div
    </div>

    <div id="layout">
        Layout Div
    </div>

    <div id="global">
        global Div

    </div>

    </body>
    </html>

----------
reset.css
----------
#reset{
color:green;
}

----------
global.css
----------

#global{
    color:red;
}

-----------
layout.css
------------

#layout{
color:blue;
}

We will get below output when we run index.html file.

enter image description here

Upvotes: 0

user3509208

Reputation: 557

Try going directly to the css files. If your url is http://www.xxxx/com try http://www.xxxx/com/css/xxxxx.css. Check if your able to open the css. If not there is a issue with your path

Upvotes: 0

Gerrit Bertier

Reputation: 4221

Try to use Firebug/Chrome Web Inspector and see if the files load. It might be that the web user has no access rights to the CSS files, in this case you should see that the files can't be loaded and they return a 401 HTTP status. In this case try to set the correct permissions (through CHMOD if it's a Unix server, 0644 should be sufficient).

Upvotes: 1

Arjun

Reputation: 2227

try it by removing media and type attributes ,May it will work

Upvotes: 0

Stickers

Reputation: 78676

Normally for this kind of problem, I would do:

add a style like body {border:10px solid red !important;} into the css file and refresh the html file.
Check if there is any typo in the path and file names, double check again, use copy/paste the names if necessary.
Use versions, like ... href="css/reset.css?001" ...
Check the folder and files permissions on the server.
Try load it on a different browser or "private mode".

Hope it helps!

Upvotes: 1

Sonia

Reputation: 172

If you use the whole URL as a path, does it works? If it does, there is something wrong with your path. Try make it absolute by adding a / href="/css/reset.css"

Upvotes: 0

Antoine Subit

Reputation: 9913

Look in debug console if ressources are loaded. If not and if you see this error for each ressources :

ERR_BLOCKED_BY_CLIENT

Just disable AdBlock Plugin.

Upvotes: 0

Pekka

Reputation: 449395

It's either the wrong content-type header as jensgram suggests, or the relative path you are giving (css/...) is wrong because the page itself is in a different folder.

Install Firebug and switch to the "net" tab. It will show you if the files failed to load due to a wrong URL.

Upvotes: 1

BalusC

Reputation: 1108682

The relative URL is likely wrong. To help you further we need to know two things:

What is the full (absolute) URL with which you open the HTML page? Check browser address bar.
What is the full (absolute) URL with which you can open the CSS file individually in your browser?

Once you know both, you can do the math to get the right relative path for use in link tag.

Upvotes: 2