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 Style New Pages

Jethro Abarquez
Jethro Abarquez
2,316 Points
Posted by Jethro Abarquez
Jethro Abarquez
2,316 Points

picture doesn't appear

when display block is used the picture won't appear

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jethro,

Are you using firefox? The image doesn't disappear but it's offscreen on the right side of the header. you might be able to scroll horizontally and see it.

The problem is related to the floated header never being cleared.

I recommend that you clear the floated header in your wrapper div.

Add clear: both to your existing #wrapper rule.

#wrapper {
  clear: both;
}

There's a solution in the Teacher's Notes for this video which does fix this problem but clearing it in your wrapper instead will fix other problems as well.

Jethro Abarquez
Jethro Abarquez
2,316 Points
Jethro Abarquez
Jethro Abarquez
2,316 Points

yeah im using firefox. now it works thank you very much. i didn't notice the horizontal scroll-bar. thank you

Natalia C.
Natalia C.
2,027 Points
Natalia C.
Natalia C.
2,027 Points

yay!!! :D Thanks so much! I had the same problem (among others) w/ browser compatibility.

eck
eck
43,038 Points
eck
eck
43,038 Points

Did you write the correct src="" value in your image tag? Double check that the spelling of the image file's location is correct.

Jethro Abarquez
Jethro Abarquez
2,316 Points
Jethro Abarquez
Jethro Abarquez
2,316 Points

if i remove the display:block in css the image will appear but if the display block is there it won't display

eck
eck
43,038 Points

Hm, would you be able to copy the relevant code from your html and css?

eck
eck
43,038 Points

I don't think this is the correct jsfiddle. I only see 12 lines of html, 5 lines of css and no image tages :P

eck
eck
43,038 Points
eck
eck
43,038 Points

Looking at it I am almost certain the problem is the image tag's source attribute:

<img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">

<!--
the src attribute is currently "img/nick.jpg", which means in the  same folder as your html file is another folder named "img" that contains a jpg called "nick"
-->

So I am wondering, are you working only on JSFiddle? Or are you working with files that are saved on locally on your pc? Because the the src "img/nick.jpg" definitely is not going to give you your image if it is JSFiddle that you are working from.

Jethro Abarquez
Jethro Abarquez
2,316 Points
Jethro Abarquez
Jethro Abarquez
2,316 Points

i am working on Workspace. the image is visible if i remove the display:block in css but if i added it back it won't. i was just following the video tutorial but it doesn't work the same.

eck
eck
43,038 Points

Sorry but I am stumped >.<

I don't use the Workspace so I am unfamiliar with it and what quirks it may have. To me your html and css look fine. I can only suggest to take your files, work locally on your pc. If the images still don't work we will know it is your code ( or your browser? Maybe ), if they do work then you probably found a bug with Workspace.