title: Css is not loading correctly when I follow a link
body: <p>I have an issue with my css. </p>
  
  <p>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. </p>
  
  <p>All of the links have the exact same code so I dont understand why it does not function. </p>
  
  <p>Here is my source code:</p>
  
  <pre><code>&lt;!--
  To change this template, choose Tools | Templates
  and open the template in the editor.
  --&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;LINK href="styles.css" rel="stylesheet" type="text/css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
              &lt;div id ="leftcol"&gt;
                  &lt;a href="content/practice.html"&gt;&lt;div class ="left-column-item"&gt;Practice!&lt;/div&gt;&lt;/a&gt;
                  &lt;a href="content/AboutUs.html"&gt;&lt;div class ="left-column-item"&gt;About Us!&lt;/div&gt;&lt;/a&gt;
                  &lt;a href="content/contactUs.html"&gt;&lt;div class ="left-column-item"&gt;Contact Us!&lt;/div&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;div id="left-placeholder"&gt;&lt;/div&gt;
          &lt;div id ="left-pusher"&gt;&lt;/div&gt;
          &lt;div id ="content"&gt;Math Practice Site &lt;br&gt; hello&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  
  //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%;
  }
  </code></pre>
  
  <p>Here is my practice page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;LINK href="../styles.css" rel="stylesheet" type="text/css"&gt;
          &lt;script type ="text/javascript"&gt;
  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
              &lt;div id ="leftcol"&gt;
                  &lt;a href="practice.html"&gt;&lt;div class ="left-column-item"&gt;Practice!&lt;/div&gt;&lt;/a&gt;
                  &lt;a href="aboutUs.html"&gt;&lt;div class ="left-column-item"&gt;About Us!&lt;/div&gt;&lt;/a&gt;
                  &lt;a href="contactUs.html"&gt;&lt;div class ="left-column-item"&gt;Contact Us!&lt;/div&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;div id="left-placeholder"&gt;&lt;/div&gt;
          &lt;div id ="left-pusher"&gt;&lt;/div&gt;
          &lt;div id ="content"&gt;Practice!&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>