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 trialJethro Abarquez
2,316 Pointspicture doesn't appear
when display block is used the picture won't appear
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi 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.
eck
43,038 PointsDid 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
2,316 Pointsif i remove the display:block in css the image will appear but if the display block is there it won't display
eck
43,038 PointsHm, would you be able to copy the relevant code from your html and css?
Jethro Abarquez
2,316 Pointshttp://jsfiddle.net/FsjkM/1/ line 26 for html and line 139 in css
eck
43,038 PointsI don't think this is the correct jsfiddle. I only see 12 lines of html, 5 lines of css and no image tages :P
Jethro Abarquez
2,316 Pointssorry about that :D http://jsfiddle.net/FsjkM/382/
eck
43,038 PointsLooking 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
2,316 Pointsi 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
43,038 PointsSorry 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.
Jethro Abarquez
2,316 Pointsthank you for the help :D
Jethro Abarquez
2,316 PointsJethro Abarquez
2,316 Pointsyeah im using firefox. now it works thank you very much. i didn't notice the horizontal scroll-bar. thank you
Natalia C.
2,027 PointsNatalia C.
2,027 Pointsyay!!! :D Thanks so much! I had the same problem (among others) w/ browser compatibility.