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

CSS How to Make a Website Adding Pages to a Website Add Iconography

Skye Giroux
Skye Giroux
690 Points

The background-images aren't appearing.

I have checked and rechecked my code, but can't seem to get the images to appear. I've noted that several inconsistencies throughout this class with my code vs. the instructer's have been caused by my using FireFox. Does anyone know if this anything to do with the url selector from working? Or maybe I'm missing something obvious that I screwed up with my code... I'm still triple checking that :)

My HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Skye Giroux | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Amatic+SC|Open+Sans+Condensed:300,300italic,700|Changa+One:400,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Skye Giroux</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li> 
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <h3>General Information</h3>
        <p>I am not currently looking for new design work, but I am looking for internships and/or entry level positions.</p>
        <p>Please only use phone contact for urgent inquiries, otherwise please use email.</p>
      </section>
      <section>
        <h3>Contact Details</h3>
        <ul>          
          <li class="phone"><a href=tel:555-5036>555-5036</a></li>
          <li class="mail"><a href=mailto:skye@example.com>skye@example.com</a></li>          
        </ul>
      </section>       
      <footer>
        <a href="http://twitter.com/skyeblu87"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/skyeblu87"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Skye Giroux</p>
      </footer>
    </div>  
  </body>
</html>

My CSS:

/***************************
GENERAL
****************************/

body {
  font-family: 'Open Sans Condensed', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}

/***************************
HEADING
****************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center; 
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15 px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-family: 'Amatic SC', sans-serif;
  font-size: 1.5em;
  margin: -5px 0 0;
  font-weight: normal;
}



/***************************
NAVIGATION
****************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 700;
  padding: 15px 10px;
}


/***************************
FOOTER
****************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/***************************
PAGE: PORTFOLIO
****************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}



/***************************
PAGE: ABOUT
****************************/

.profile-photo {
  display: block;
  clear: both;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}



/***************************
PAGE: CONTACT
****************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}



/***************************
COLORS
****************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile devices */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f
}

4 Answers

Hi Skye,

It looks like you're missing the "contact-info" class on your ul.

<ul class="contact-info">
          <li class="phone"><a href=tel:555-5036>555-5036</a></li>
          <li class="mail"><a href=mailto:skye@example.com>skye@example.com</a></li>          
</ul>

Let us know if there are still issues after putting that in.

Ashlea Bowlin
Ashlea Bowlin
2,591 Points

You pasted your HTML again, instead of your CSS.

Nevermind you seem to have corrected it

Donny Stiefel
Donny Stiefel
7,682 Points

Fix this first and see if you still have the issue:

45 h1 Value Error : margin only 0 can be a length. You must put a unit after your number : 15 px 0

On a side note, Jason's response above is absolutely spot-on. I did not see it before I responded. However, don't forget to fix what I pasted here, as it might cause other problems elsewhere in your code if you do not fix it.

Skye Giroux
Skye Giroux
690 Points

Do'h! I'm a dummy. See, I knew I had missed something! If it wasn't for the previous issues being caused by Firefox, and me wildly searching my code before for no reason, I wouldn't have doubted that I made the mistake :) Thanks everyone, that fixed it!