Home/ Questions/Q 8768019
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T16:57:56+00:00

I have an issue with my css. On the homepage it loads up fine

  • 0

I have an issue with my css.

On the homepage it loads up fine but when I go to a link on my site the css does not load correctly. So basically the below code works fine on index.html but when I go to any link indicated below it craps out.

All of the links have the exact same code so I dont understand why it does not function.

Here is my source code:

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <LINK href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
            <div id ="leftcol">
                <a href="content/practice.html"><div class ="left-column-item">Practice!</div></a>
                <a href="content/AboutUs.html"><div class ="left-column-item">About Us!</div></a>
                <a href="content/contactUs.html"><div class ="left-column-item">Contact Us!</div></a>
            </div>
        <div id="left-placeholder"></div>
        <div id ="left-pusher"></div>
        <div id ="content">Math Practice Site <br> hello</div>
    </body>
</html>

//the css file:

/* 
    Document   : styles
    Created on : Nov 2, 2012, 11:50:48 PM
    Author     : me
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}
#leftcol a{text-decoration: none;}
#leftcol{   
    left: 10%;
    width: 200px;
    height: 100%;
    margin-top: 0px;
    position: absolute;
    opacity:0.6;
    color: white;
    font-size: 2em;
}
#left-placeholder{
    height: 100%;
    width: 10%;
    float: left;
}
#left-pusher{
    height: 100%;
    width: 200px;
    float: left;
}
.left-column-item{
    background: url('images/bgnav.jpg');
    height: 33.334%;
    background-size: 100%;
    opacity:0.6;
    color: white;
}
.left-column-item:hover{
    background: url('images/bgnav.jpg');
    height: 33.334%;
    background-size: 100%;
    opacity: 1;
}
#content{
    text-align: center;
    color: white;
    font-size: 5em;
    height: 100%;
    width: 70%;
    float:left;
}

body{
    background: url('images/background.jpg');
    background-size: 100%;
    margin: 0;
    min-height: 100%;
    width: 100%}
html, body
{
    height: 100%;
}

Here is my practice page:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <LINK href="../styles.css" rel="stylesheet" type="text/css">
        <script type ="text/javascript">

        </script>
    </head>
    <body>
            <div id ="leftcol">
                <a href="practice.html"><div class ="left-column-item">Practice!</div></a>
                <a href="aboutUs.html"><div class ="left-column-item">About Us!</div></a>
                <a href="contactUs.html"><div class ="left-column-item">Contact Us!</div></a>
            </div>
        <div id="left-placeholder"></div>
        <div id ="left-pusher"></div>
        <div id ="content">Practice!</div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You css file is not using an absolute path. If your link is within a subfolder on your site, then the css path is no longer correct.

    So, assuming your css file is at the root of your site, changing the HTML to the following:

    <LINK href="/styles.css" rel="stylesheet" type="text/css">

    That should fix the issue.

    EDIT
    I know you say everything is fine, but you ARE using relative paths to your CSS, so you could very well have 2 versions of the css file – one that is correct, the other that is not quite the same, and that could account for the “error loading” the css file. You can eliminate this possibility completely by using a root-based path to the location of your proper css file. If anything I’d at least start there to control the situation. If there is still an issue, then you can at least know you’ve eliminated this as a possibility – and considering most every answer on here is pointing to the same problem, I’d have to say it is the most likely culprit.

    Also, your practice page uses

    <LINK href="../styles.css" rel="stylesheet" type="text/css">

    So unless your practice page is in a subfolder in relation to the first page in your post, the two pages are not using the same css file.

    • 0