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

HTML How to Make a Website Adding Pages to a Website Style New Pages

Cheryl Hurley
Cheryl Hurley
2,250 Points
Posted by Cheryl Hurley
Cheryl Hurley
2,250 Points

img disappears if above <h3>

For some reason in this portion of the project, if my About page image is ABOVE the h3 tag, it disappears. Why is this?

Disappears:

 <section>
        <img src="img/Cheryl-Malik.jpg" alt="Cheryl Malik" id="profile-photo">
        <h3>About</h3>
        <p>Cheryl is a food blogger and photographer who also works in web design and digital marketing. She's learning Spanish and how to properly code. She loves sports and hates celery.</p>
        <p>If you want to follow me on Twitter, my username is <a href="http://twitter.com/thestylistquo">@thestylistquo</a></p>
      </section>

Photo visible:

 <section>
        <h3>About</h3>
        <img src="img/Cheryl-Malik.jpg" alt="Cheryl Malik" id="profile-photo">
        <p>Cheryl is a food blogger and photographer who also works in web design and digital marketing. She's learning Spanish and how to properly code. She loves sports and hates celery.</p>
        <p>If you want to follow me on Twitter, my username is <a href="http://twitter.com/thestylistquo">@thestylistquo</a></p>
      </section>

6 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Cheryl,

The image probably isn't disappearing but hiding just off the top right of the viewport. You might have a horizontal scrollbar where you can scroll to the right and see it. This happens in firefox.

This is related to the floated header not being cleared. You should have your wrapper element clear the header since this is the first element after the header.

I added clear: both;:

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

See if that fixes your problem.

Out of curiosity, are you seeing a gap above the header when your h3 comes first? Other people were getting gaps whenever they tried to add paragraphs or headings as their first element. So clearing the float should fix both the image problem as well as the gaps above the header that other people have been getting.

Also, as Michael Austin pointed out, you should change the id in your html to a class class="profile-photo"

Michael Austin
PLUS
Michael Austin
Courses Plus Student 7,814 Points
Michael Austin
Michael Austin
Courses Plus Student 7,814 Points

Hi,

Can you also post up your CSS? The HTML is fine, so is most likely CSS related.

Michael Austin
PLUS
Michael Austin
Courses Plus Student 7,814 Points
Michael Austin
Michael Austin
Courses Plus Student 7,814 Points

Hi,

I can’t seem to replicate the issue. The image is always visible for me, which browser are you using for testing?

I did notice one issue, and that in your HTML file you have an ID of profile-photo assigned, yet in your CSS you’re targeting a class of profile-photo. Either change your image html to:

<img src="img/Cheryl-Malik.jpg" alt="Cheryl Malik" class="profile-photo">

OR change your CSS to

#profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}
Zharif Zaharul
Zharif Zaharul
1,072 Points
Zharif Zaharul
Zharif Zaharul
1,072 Points

Please do update. Im curious to know the answer too :)

Cheryl Hurley
Cheryl Hurley
2,250 Points
Cheryl Hurley
Cheryl Hurley
2,250 Points

I accidentally copied the code when I had the class and ID at odds with one another. I tried changing the class to an ID to see if for some reason that changed anything, but nothing, of course.

AHA! I do see my little face hidden off to the right. How very strange. I've now cleared the header and everything is where it should be. Should I always clear a floated header, as good practice? Why does Firefox do this but other browsers don't? Would this be an instance to include a -moz- selector?

I'm not seeing a gap when my h3 comes first, but I was last night. I moved some things around and somehow fixed it but don't remember what the code looked like or what I did to it.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

There might not have been a gap with the h3 because I think Nick removed the top margin in the css. But any element that comes first in <section> that has a top margin will produce a gap above the header. This is a general problem that happens in both firefox and chrome.

The profile photo problem seems to be specific to firefox and could possibly be a bug in that browser. But the header gap problems happen in firefox and chrome and is due to not clearing the floated header.

I would say in general that you should clear floats on elements that you want to make sure drop below previously floated elements.

In this case, we want to make sure the wrapper div which contains the main content drops below the floated header so we clear it there.

You might have a two column floated layout where 1 column is floated left and the other floated right. Then you might have your footer come after that. In this case, you want to be sure your footer drops below both floated columns so you have your footer clear the floats.