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

General Discussion

Posted by David Hynes
David Hynes
4,309 Points

Workspaces work does not appear.

Hi guys. Recently while doing the iconography and earlier videos. I had trouble with my work not showing. For instance, when I added a new page it didn't appear; when I switched to Firefox from Chrome recently, my profile photo randomly disappeared when it was there before, the page that wasn't there but should have been appeared, and when I attempted to style the lists on Contacts nothing happened. I'm Ctrl + F5'ing the page and still no changes.

11 Answers

Owen Tran
Owen Tran
6,822 Points
Owen Tran
Owen Tran
6,822 Points

Your photo is actually on the right of the heading, use the scroll bar to scroll right. add :

clear: both;

to your main.css profile-photo class to put it back. This is a firefox issue.

David Hynes
David Hynes
4,309 Points
David Hynes
David Hynes
4,309 Points

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

}

Nothing changed. I am not sure what you mean about the scroll bar. There is nothing to scroll to Also, the list styling doesn't go away on Contacts

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

}

Also, my contact details text (all fake filler info) does not appear.

<section> <h3>Contact Details</h3>
<ul class:"contact-info"> <li class:"phone"><a href="tel:333-444-5566"></a></li> <li class="mail"> <a href="mailto:david@example.com"></a></li> </ul> </section>

David Hynes
David Hynes
4,309 Points
David Hynes
David Hynes
4,309 Points

The issue with list styling not going away and contact info not appearing was prior to switching to Firefox.

David Hynes
David Hynes
4,309 Points
David Hynes
David Hynes
4,309 Points

About page code:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>David Hynes | Designer</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/main.css">
   </head>
   <body>
      <header>
         <a href="index.html" id="logo">
            <h1>David Hynes</h1>
            <h2>Designer</h2>
         </a>
         <nav> 
            <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html" class="selected" >About</a></li>
            <li><a href="contact.html">Contacts</a></li>
            </ul>
         </nav>
      </header>
      <div id="wrapper">
  <section>
    <img src="Zoo Crew.jpg" alt="Photograph of David Hynes" class="profile-photo">
    <h3>About</h3>
    <p>Welcome to my workshop! I'm David, and this is where everything comes together. You can see some of my favorite projects here. When I'm not at the console, I'm reading up on economics, rolling polyhedral dice with my friends, and walking under the stars.</p>
    <p>If you're missing a crazy uncle in your life and need to see all of my impassioned political and economics commentary (and who doesn't have enough of that on their feed already?), you can indulge at <a href="http://facebook.com/dhynes2618">facebook.com/dhynes2618</a>.</p>
  </section>
       <footer>
            <a href="https://www.facebook.com/dhynes2618">
            <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> </a> 
            <p>&copy; 2015 David Hynes.</p>
         </footer>
     </div>
   </body>   
</html>
David Hynes
David Hynes
4,309 Points
David Hynes
David Hynes
4,309 Points

Contact code:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>David Hynes | Designer</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/main.css">
   </head>
   <body>
      <header>
         <a href="index.html" id="logo">
            <h1>David Hynes</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">Contacts</a></li>
            </ul>
         </nav>
      </header>
      <div id="wrapper">
 <section>
  <h3>General Information</h3>
        <p>I'm currently expanding my HTML and CSS vocabulary using Team Tree House!</p>
        </section>  
<section>
<h3>Contact Details</h3>   
  <ul class:"contact-info">
    <li class:"phone"><a href="tel:333-444-5566"></a></li>
    <li class="mail"> <a href="mailto:david@example.com"></a></li>
  </ul>
    </section>

       <footer>
            <a href="https://www.facebook.com/dhynes2618">
            <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> </a> 
            <p>&copy; 2015 David Hynes.</p>
         </footer>
     </div>
   </body>   
</html>
David Hynes
David Hynes
4,309 Points

Hmm, well I caught the error in my ul class and li class and changed them to class="XXX". That made the bullet styling go away, but the information still does not appear.

David Hynes
David Hynes
4,309 Points
David Hynes
David Hynes
4,309 Points 
/*********************************
            ABOUT
*********************************/

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

}

/*********************************
             CONTACT INFO
*********************************/

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

}

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

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}
Owen Tran
Owen Tran
6,822 Points
Owen Tran
Owen Tran
6,822 Points

<ul class:"contact-info"> <li class:"phone"><a href="tel:333-444-5566"></a></li>

should be

<ul class="contact-info"> <li class="phone"><a href="tel:333-444-5566"></a></li>

using = not :

trying to figure out about the pic................

Owen Tran
Owen Tran
6,822 Points
Owen Tran
Owen Tran
6,822 Points

you have <img src="Zoo Crew.jpg" are you in the same directory? if not, include it, see if that works...

David Hynes
David Hynes
4,309 Points

The image is where all the other images are- .img . It shouldn't be an issue, if the facebook stuff shows, so should the profile photo. That's why I don't get it. Also, the image was there before...

Owen Tran
Owen Tran
6,822 Points
Owen Tran
Owen Tran
6,822 Points

try "img/Zoo Crew.jpg" the facebook image is in your img/ folder i think, try that.

Owen Tran
Owen Tran
6,822 Points
Owen Tran
Owen Tran
6,822 Points

<ul class="contact-info"> <li class="phone"><a href="tel:333-444-5566">YOUR INFO SHOULD BE HERE</a></li> <li class="mail"> <a href="mailto:david@example.com">AND HERE</a></li> </ul>

Your info should be between the < a > tags as above and your href should be your url

David Hynes
David Hynes
4,309 Points
David Hynes
David Hynes
4,309 Points

Wow! Thank you for the help. Everything is as it should be. What I wonder about is why the image worked before, despite my error? Maybe Chrome is just extra-forgiving!

Owen Tran
Owen Tran
6,822 Points

You're welcome mate. I think chrome is more robust than firefox for developers, I would recommend switching back ;)