CSS to HTML linking bug

Question

I can't link external css file to html

The HTML file is situated in folder "header", css file header.css is also situated in this folder.

Heres the css code:

@charset "UTF-8";

h1 {
    font-size: 250%;
}

Here is the 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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="header.css" />
        <title> <?php echo $title; ?> </title>
    </head>
    <body>
        <h1> <?php echo $header; ?> </h1>
        <div id = 'myOrgButton'>
            <form method="post" action="../../controllers/MyOrganisation">
                <input type="submit" value="My Organisation" />
            </form>
        </div>
        <div id = 'logoutButton'>
            <form method="post" action="../../controllers/<?php echo $action; ?>">
                <input type="submit" value="<?php echo $action; ?>" />
            </form>
        </div>
        <hr/>

The php is here because this is header is php view that i am loading from controller. I tried defining absolute path, placing css in different folders, nothing works.

When the css is embedded in html with tag it works perfectly, so i guess the problem is with linking.

Update
I've added full html code.

Have you checked the permissions of the CSS file on the server? It's possible it cannot be read by anyone. Also, use Firebug/Web Inspector to check the console to see if you are getting a 404 on the CSS file. — Mark
– Mark, Commented Jan 17, 2012 at 20:37
When i am exploring CSS tab in fireBug, no rules are present. In HTML tab, when i try to expand link: i get 404, what that could mean? — Vasja Harujko
– Vasja Harujko, Commented Jan 17, 2012 at 20:39
Well, if you can host ur code somewhere, it will be easy to help you out — Bala
– Bala, Commented Jan 17, 2012 at 20:41
404 is when the file's not found. Are you sure you're saving it to the correct folder? — Alex Morales
– Alex Morales, Commented Jan 17, 2012 at 20:41

mbxtr · Accepted Answer · 2012-01-17 20:43:22Z

2

Since this is a view from code igniter, the file system path to that folder is probably not the same as the URL path. First of all, you need to put it in a folder that is accessible over http. I'm not familiar with Code Igniter's implementation of this, but you should have either a "media" or "assets" folder where you put all your CSS and static images. Then, you should make the <link> href relative to the domain.

So, if your folder structure looks like this and your "assets" folder is at the root:

assets/
  images/
  css/
    header.css

Your CSS include should look like this:

<link rel="stylesheet" type="text/css" href="/assets/css/header.css" />

answered Jan 17, 2012 at 20:43

mbxtr

2,3131 gold badge15 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vasja Harujko Over a year ago

you were right, only the link should have been "assets/css/header.css" Working perfectly now

Collectives™ on Stack Overflow

CSS to HTML linking bug

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related