Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Watch Video

Posted September 30, 2015 5:43am by

Website not displaying css.

I used a site that I built and uploaded it to the server via the process described in "How to make a website". The index.html file is not displaying any of the linked css, but when I view the file in preview outside of the server, the styling shows up.

Is there a good set of things to troubleshoot when this happens? Everything appears to be linked correctly. I am viewing the project in Chrome, and maybe wondered if it had anything to do with vendor prefixes.

September 30, 2015 6:12am

The index.html file is not displaying any of the linked css, but when I view the file in preview outside of the server, the styling shows up.

How are you viewing the index.html file when you say the css styling isn't showing up? And how are you viewing the file when you "preview outside of the server"?

You mentioned uploading it to a server. Do you have a live link you can share?

September 30, 2015 6:16am

To clarify, when you use the browser to open the index.html file, everything works. But when you upload the site (all of the files and folders included) to a web hosting server and open index.html, the styling doesn't show up?

September 30, 2015 1:24pm

Yes as Brent stated when I view the site in the browser the styling is not showing up. I am using Coda 2 as my text editor and when I preview from Coda the styling shows up fine. The home page is at henrymorrow.com and I will include my code below.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Henry Morrow | Home</title>
    <meta charset="UTF-8">

    <!-- Information that will display with description> -->

    <meta name="description" content="Welcome to my page! I'm a recruiter, and I would love to help you with your next project! Here you will find my resume, and some other general information on me. Thank you for visiting!" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- External Normalize, CSS, and Javascript-->

  <link rel="stylesheet" type="text/css" href="css/normalize.css">
  <link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Ubuntu|Droid+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

    <!--Header in Grid-->

    <header class="main-header">
        <div class="background">        
            <h1 class="main-logo"><a href="index.html"><img src="IMG/Henrylogo.svgz" alt="logo"></a></h1>
            <ul class="main-nav">
                <li><a href="index.html" id="selected">Home</a></li>
                <li><a href="hbiofloat.html">Bio</a></li>
                <li><a href="hresumefloat.html">Resume</a></li>
                <li><a href="hcontactfloat.html">Contact</a></li>
            </ul>
              <button class="hamburger">&#9776;</button>
              <button class="cross">&#735;</button>
            <div class="menu">
              <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="hbiofloat.html">BIO</a></li>
                <li><a href="hresumefloat.html">RESUME</a></li>
                <li><a href="hcontactfloat.html">CONTACT</a></li>
              </ul>
            </div> 
        </div>
          <div class="main-heading">
            Recruiter
          </div> 
          <div class="heading-item">
            <a href="hresumefloat.html">Resume</a>
          </div>           
    </header>
<!--
    <div class="main-banner hide-mobile">
        <h1>This is the Main Banner Heading</h1>
        <p>Andouille pork chop pancetta drumstick ground round beef ribs swine brisket ham.</p>
    </div>
-->

    <!--Body Column in Grid-->

    <div class="content">
        <div class="">
            <h2 class="content-header">A Little Intro</h2>
                <div class="intro-content">
                  <p>My name is Henry Morrow and I am currently an Admissions Representative. I truly enjoy connecting clients with an opportunity that can help them reach their future goals! I also have a passion for learning about technology and ways it can be used to help make life easier. This drive led me to learn coding and build this site so that others can learn about how I can help their recruitment efforts.</p>
                </div>
                <div class="break">
                  <hr>
                </div>
                <h1 class="content-header">Need help meeting your recruitment goals? </h1>
                <div id="hire" class="content-action">
                    <a href="hcontactfloat.html">Contact Me</a>
                </div>
        </div>
    </div>  

    <!--Footer-->

    <footer class="main-footer">
     <div>
       <div class="footer-logo"><img src="IMG/Henrylogo.svgz" alt="logo"></div>
       <div>Henry Morrow</div>
       <div>
         <ul class="footer-nav">
           <li><a href="index.html" id="select">Home</a></li>
           <li><a href="hbiofloat.html">Bio</a></li>
           <li><a href="hresumefloat.html">Resume</a></li>
           <li><a href="hcontactfloat.html">Contact</a></li>
         </ul>
       </div>   
        <div id="copyright">&copy;2015 Henry Morrow</div>
        <div class="icon-row"><a href="https://www.facebook.com/henry.morrow1"><img class="footer-icon" src="img/whitefacebookembed.svg" alt="Facebook Logo"></a>
        <a href="https://twitter.com/hankmiestro66"><img class="footer-icon" src="img/whitetwittericonembed.svg" alt="Twitter Logo"></a> 
        <a href="https://instagram.com/honron66/"><img class="footer-icon" src="img/whiteinstagramiconembed.svg" alt="Instagram Logo"></a>
        <a href="https://www.linkedin.com/pub/henry-morrow/32/540/65b"><img class="footer-icon" src="img/whiteinkediniconembed.svg" alt="LinkedIn Logo"></a>
        <a href="mailto:hjmorrow23@gmail.com"><img class="footer-icon" src="img/whitemailembed.svg" alt="Email Logo"></a>
        </div>
     </div>
    </footer>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/henrysite.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

CSS

/* Page Styles
================================ */

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font: normal 1em/1.5 sans-serif;
    color: #222;
    background-color: #edeff0;
    overflow-x: hidden;
}

p {
  text-indent: 2.0rem;
}



/* Main Layout Styles
================================ */

.content {
    margin-top: 6.25rem;
}

.main-header {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    height: 25rem;
    background:linear-gradient(
      rgba(192, 192, 192, 0.6), 
      rgba(192, 192, 192, 0.6)
    ),  url('../img/tie.jpg'); 
    background-size: cover;
    background-position: center;
    font-family: 'Droid Sans', sans-serif;
}

.main-logo {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.5em;
    text-align: left;
    display: inline-block;
}

.main-logo img,
.footer-logo img {
    width: 100px;
    height: 100px;
}

.main-logo a,
.heading-item a {
    display: inline-block;
    text-align: center;
    color: white;
    padding: 0.625rem 0.625rem;
    text-decoration: none;
}

.main-logo a:hover,
.main-nav a:hover,
.footer-nav a:hover {
    color: grey;
    transition: 0.5s;
}

#selected,
#select {
    color: grey;
}

.heading-item a:hover {
    background-color: white;
    color: grey;
    transition: 0.5s;
}

.heading-item,
#more-projects {
    text-align: center;
}

.heading-item a {
    border: 1px solid white;
}


.main-nav {
    display: none;
}

.hamburger{
  background:none;
  position:absolute;
  top:0;
  right:0;
  line-height:45px;
  padding:0px 15px 0px 15px;
  color:#fff;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.cross{
  background:none;
  position:absolute;
  top:0px;
  right:0;
  padding:0px 15px 0px 15px;
  color:#fff;
  border:0;
  font-size:3em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}

.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#131313;  position:absolute; text-align:center;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;}
.menu li:hover{display: block;    background:#181818; padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;}
.menu ul li a { text-decoration:none;  margin: 0px; color:#fff;}
.menu ul li a:hover {  color: #fff; text-decoration:none;}
.menu a{text-decoration:none; color:white;}
.menu a:hover{text-decoration:none; color:white;}

.main-heading {
  color: white;
  text-align: center;
  font-size: 3rem;
  font-weight: 600;
  padding-bottom: 1.5rem;
}

.content-header {
  text-align: center;
  padding-bottom: 3.125rem;
}

.intro-content {
  padding-left: 12.5rem;
  padding-right: 12.5rem;
  padding-bottom: 3.125rem;
  min-width: 100%;
}

.break {
  outline: 1px solid transparent;
  padding-top: 0.625rem;
  padding-bottom: 1.25rem;
}

hr {
  height: 0.0625rem;
  opacity: 0.4;
}


#imageGallery {
    width: 100%;
    height: 100%;
}

#imageGallery li {
    display: block;
    text-align: center;
    padding-bottom: 1.25rem;
}

#imageGallery img {
    width: 16rem;
    height: 16rem;
    padding: 0.3125rem;
}

#overlay {
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#more-projects,
#hire {
    padding-top: 0.625rem;
    padding-bottom: 3.125rem;
}

#more-projects a:hover,
#hire a:hover {
    background-color: black;
    color: white;
    transition: 0.5s;
}

#hire {
    text-align: center;
}

#more-projects a,
#hire a {
    border: 2px solid black;
    text-decoration: none;
    color: black;
    padding: 0.625rem;
}

.icon-row a{
    padding-right: .25rem;
}

.footer-icon {
  width: 1rem;
  height: 1rem;
  border: none;
 }

.main-footer {
    text-align: center;
    margin-top: 1.875rem;
    padding: 4rem 2rem;
    background-color: silver;
    color: white;
}

.footer-logo {
    text-align: center;
    display: inline-block;
    font-size: 1rem;
    font-weight: 200;
    padding-bottom: .5rem;
}

.footer-nav li{
    display: inline-block;
    padding-left: .5rem;
    padding-bottom: .5rem;
    padding-top: .5rem;
    font-weight: 200;
}

.footer-nav a {
    text-decoration: none;
    color: white;
}

#copyright {
    padding-bottom: .5rem;
}



/* Float Clearfix
    ================================ */

    .group:after {
      content: " ";
      display: table;
      clear: both;
    }

/* Media Queries
    ================================ */

@media (min-width: 768px) { 

    /* Main Layout Styles
    ================================ */

    body {
        padding-top: 4.6875rem;
    }

    .content {
        margin-top: 40rem;
    }

    .main-header {
        position: absolute;
        top: 0;
        width: 100%;
        height: 40rem;
    }

    .main-logo,
    .main-nav li {
        float: left;
    }

    .main-heading {
        margin-top: 12rem;  
    }

    .main-nav {
        text-align: right;
        display: inline-block;
        padding-left: 50px;
        float: right;
    }

    .menu,
    .hamburger,
    .cross {
        display: none;
    }

    .main-nav a {
        display: inline-block;
        text-align: center;
        color: white;
        padding: 0.625rem;
        text-decoration: none;
    }


    .main-nav li {
        margin-top: 0.375rem;
        margin-left: 0.625rem;
        text-align: center;
    }

    .selected {
        color: grey;
    }

    #imageGallery {
        text-align: center;
    }

    #imageGallery li {
        display: inline-block;
        text-align: center;
    }

    #overlay {
        background: linear-gradient(
      rgba(0, 0, 0, 0.6), 
      rgba(0, 0, 0, 0.6));
    }



}

@media (min-width: 1px) and (max-width: 767px)  {
    .main-nav li {
        margin-top: 0.75rem;
    }
}

3 Answers

September 30, 2015 2:06pm

Hey, Henry.

I took a look at your live site and style.css is loading. I used the element inspector to make sure it was applying styles directly from the stylesheet and it was.

My guess is that your stylesheet just failed to load with the page once and then you were viewing the cached version of the file. Stylesheets don't usually fail to load, but I have seen it happen a few times.

The easiest way to make sure you're not pulling from the cache is to hit refresh on your browser. You can also delete your temporary internet files.

I notice you use capital letters in directories and file names. If something doesn't load, make sure you check your capitalization. HTML doesn't care if you use <HTML> or <html> in tags, but it matters with file names.

BTW, good job on the home page. You've got the start of a nice modern design there. :-)

Roy

September 30, 2015 2:14pm

Thanks Roy! The issue actually ended up being the capitalization so it is all set now barring some slight semantic issues that I am tweaking. The feedback is especially appreciated since this is my first crack at building a site from scratch since starting at treehouse!

September 30, 2015 2:20pm

That first site is always the hardest ... and maybe the most rewarding. ;-)

Good luck with it and ask for feedback any time you need it.

September 30, 2015 1:33pm

Hi Henry! Here are a couple of hints you can check/use in order to debug what is happening:

-You can use chrome developer tools in order to check if your css files are loading up when you request your index.html to your server. Here at Treehouse Nick shows you how to use the Chrome devtoos so you could start by checking that out.

-Another common problem is file placement. When uploading a site, you have to maintain file hierarchy and folder placement. So if you have your index file in your project folder and beside it you have a css folder with everything about css in there...when you upload your files to the server , you should create the same folder with the same content besides your index file. Some frequent mistake when starting out is to forget about this things and place everything in the same folder which will cause your css files not loading up properly.

Hope you find this tips useful!

Cheers!

September 30, 2015 2:12pm

Hey Henry as Roy stated your styles are loading just fine, so maybe it's a cache problem! Check Roy tips to solve that!

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Henry Morrow

Henry Morrow

Website not displaying css.

Roy Penrod

Roy Penrod

Brent Forwood

Brent Forwood

Henry Morrow

Henry Morrow

3 Answers

Roy Penrod

Roy Penrod

Henry Morrow

Henry Morrow

Roy Penrod

Roy Penrod

Julian Aramburu

Julian Aramburu

Julian Aramburu

Julian Aramburu