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 trialRonnie Brown
6,755 Points"display: block" makes my image of Nick disappear
Hi,
I'm following the video and styling the about page, but when I add the "display" attribute with the "block" value, to the "profile-photo" class, my image disappears.
What am I doing wrong?
Ronnie
9 Answers
Travis Birch
3,602 PointsChange to
.profile-photo { display: inline-block; }
that should fix the browser bug.
Samuel Mayol
4,786 Pointsif you use this: display: inline-block; your picture will appear in one side of your browser, if you want your picture to be rounded and in the center of your web browser use this:
/* If you are using Google Chrone you will not have the problem that your picture disappear when you use display:block; However if you are using Mozilla FireFox you will need to add to your code clear: both; */
.profile-photo {
display: block;
clear: both;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/* CSS clear Property Property Values: both No floating elements allowed on either the left or the right side */
Kyle McHatton
6,698 PointsThe way I got around it was to add a clear:both; to wrapper tag in CSS
Lyle Denman
10,625 PointsMuch cleaner than adding a border, Kyle. Thanks.
Jason Anello
Courses Plus Student 94,610 PointsI would say this is the proper solution. Floated elements should be cleared when needed. Since the wrapper is what comes immediately after the header it should be the one that clears it.
It also has the benefit of fixing the more general header gap problems that happen in both firefox and chrome (didn't test others) when either the wrapper div, section, or first child of the section
has a top margin. The content boxes for all 3 of these elements all begin at the top of the header because it's floated A top margin on any of those elements will produce a gap above the header.
By clearing the wrapper it drops the content box for the wrapper down below the header.
Aaron Baldwin
8,336 PointsWorks like a charm. Thanks for the fix Kyle, and thanks for the explanation Jason. Much appreciated.
Phillip Gibson
13,805 PointsAre you using Firefox? There seems to be a bug with the latest version that makes images with display: block
disappear. Try using Chrome instead for now, until that is resolved.
EDIT: see my other post below which has a better fix than using inline-block
Michael Lee
11,797 PointsI have this problem in Firefox and while I'm using display: inline-block; to get around it, this is causing another issue. The margin is now being ignored and the image is not being centered. Not sure how to fix this next problem.
Phillip Gibson
13,805 PointsUpon further testing, it actually seems to be caused by the float: left;
on the header
element. In order to fix it on my own site, I removed the float
and added it within my first media query for screens at least 480px across. This didn't seem to have any adverse effects on the rest of the pages and resolved the image disappearing issue.
For reference, you can see the fix in action on the about page of my site at: http://phillipjgibson.com/about.html
You can see my whole CSS file at https://github.com/renolc/renolc.github.io/blob/master/css/style.css
The relevant parts are:
header {
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
@media screen and (min-width: 480px) {
header {
float: left;
}
}
Phillip Gibson
13,805 PointsIf I wasn't clear, my fix also doesn't require you to change the image to inline-block
.
Jason Anello
Courses Plus Student 94,610 PointsHI Phillip Gibson ,
I think this does solve the problem below 480px but you would still have the header gap problem above that. You can assign a top margin to the h3 that you currently have on your about page to see the problem.
See my comment to Kyle McHatton's answer.
Michael Lee
11,797 PointsHey Phillip thanks for that.
Phillip Gibson
13,805 PointsGlad to help.
Lyle Denman
10,625 PointsOne problem with using { display: inline-block; } is that it no longer allows the image to be centered. A way to fix this is to put the image inside of a <div id="image-center"> element and set that div is as follows:
image-center { border: 1px solid white; } /* or whatever background color your page is */. Works for me in Firefox and Chromium.
sai harsha
2,145 PointsThanks! Everyone. I faced the same problem and could see multiple solutions here. Really loved the treehouse community.
Berry Wilson
5,983 PointsHi All,
clear: both; did the trick, but why? what is there to clear?? Many thanks All, Kind regards,
Berry.
Jason Anello
Courses Plus Student 94,610 PointsHi Berry,
The header is floated left in this project. By having the wrapper div clear the float the browser will force it down below the header.
Samuel Mayol
4,786 Points/* If you are using Google Chrone you will not have the problem that your picture disappear when you use display:block; However if you are using Mozilla FireFox you will need to add to your code clear: both; */
.profile-photo {
display: block;
clear: both;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/* CSS clear Property Property Values: both No floating elements allowed on either the left or the right side */
Fuad Adetoro
6,490 PointsFuad Adetoro
6,490 PointsPost your code