Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

The CSS code made my img disappear

When following along with the tutorial, I entered the CSS code in the exact way the instructor did, yet when I preview my website, the img no longer appears. When I remove the + display: block; + from the CSS code, the img reappears. Any idea why this is happening? Also, around the same time this started, the Portfolio link stopped working as well. I've checked my html code, and CSS code and can't find anything wrong with either issues.

Sam Baines
Sam Baines
4,315 Points

Hi Krysti - post your code (html & css) and someone will take a look for you.

index.html as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Krystina Vires | Photographer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Krystina Vires</h1>
        <h2>Photographer</h2>
      </a>
      <nav>
        <ul>
          <li><a href:"index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
          <ul id="gallery">
            <li>
              <a href="img/numbers-01.jpg">
                <img src="img/numbers-01.jpg" alt="">
                <p>Experimentation with color and texture.</p>
              </a>
            </li>
            <li>
              <a href="img/numbers-02.jpg">
                <img src="img/numbers-02.jpg" alt="">
                <p>Playing with blending modes in Photoshop.</p>
              </a>
            </li>
            <li>
              <a href="img/numbers-06.jpg">
                <img src="img/numbers-06.jpg" alt="">
                <p>Trying to create an 80's style of glows.</p>
              </a>
            </li>
            <li>
              <a href="img/numbers-09.jpg">
                <img src="img/numbers-09.jpg" alt="">
                <p>Drips created using Photoshop brushes.</p>
              </a>
            </li>
            <li>
              <a href="img/numbers-12.jpg">
                <img src="img/numbers-12.jpg" alt="">
                <p>Creating shapes using repetition.</p>
              </a>
            </li>         
          </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
        <a href="http://facebook.com/krystigardner"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
        <p>&copy; 2014 Krystina Vires.</p>
      </footer>
    </div>
  </body>
</html>
Sam Baines
Sam Baines
4,315 Points

Hi - I can see the index.html link for portfolio isnt working correctly as you accidentally have a (:) colon rather than the (=) equals sign after the href tag. So changed that over and the link should work. We will need to see your css also to help you out with the images disappearing.

main.css as follows (issue is with the About page, profile photo, display: block; -- when disabled, the img appears, and when enabled, the img is gone)

/***********************************
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: 'Oswald', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  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: 800;
  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;
  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')
}

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




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

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

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

/* nav background on mobile */
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;
}

Hi Krysti Vires, I edited your comments to properly format the code so it makes it easier to follow along.

If you're having issues with the About page, can you please post the code for that also?

To format a code block, you add a line before and after with three backticks (```), usually located to the left of the number 1 on your keyboard, and include the type of code straight after the first set of backticks, like so:

    ```html
    <html>
    <head>
    <title>My webpage</title>
    <head>
    <body>
      <h1>Welcome to my webpage!</h1>
    </body>
    </html>
    ```

Note that you also need a blank line before and after the backticks for it to work.

1 Answer

Krysti,

I had the same issue when I used Firefox. There is even a technote under the video specifically for this case. All you have to do is to add clear: both before display: block to fix this issue

Thank you all. You've helped me tremendously and have kept me from pulling out my hair. :) And I've learned to slow down when looking at my code and to read the tech notes under the videos (which I had no idea were there) so again, THANK YOU!!!