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

Ronnie Brown
Ronnie 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

Post your code

9 Answers

Travis Birch
Travis Birch
3,602 Points

Change to

.profile-photo { display: inline-block; }

that should fix the browser bug.

if 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
Kyle McHatton
6,698 Points

The way I got around it was to add a clear:both; to wrapper tag in CSS

Lyle Denman
Lyle Denman
10,625 Points

Much cleaner than adding a border, Kyle. Thanks.

I 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.

Works like a charm. Thanks for the fix Kyle, and thanks for the explanation Jason. Much appreciated.

Are 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
Michael Lee
11,797 Points

I 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.

Upon 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;
    }
}

If I wasn't clear, my fix also doesn't require you to change the image to inline-block.

HI 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
Michael Lee
11,797 Points

Hey Phillip thanks for that.

Glad to help.

Lyle Denman
Lyle Denman
10,625 Points

One 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.

Thanks! Everyone. I faced the same problem and could see multiple solutions here. Really loved the treehouse community.

Berry Wilson
Berry Wilson
5,983 Points

Hi All,

clear: both; did the trick, but why? what is there to clear?? Many thanks All, Kind regards,

Berry.

Hi 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.

/* 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 */