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 Build the Contact Page

Bernard Shields
PLUS
Bernard Shields
Courses Plus Student 1,209 Points
Posted by Bernard Shields
Bernard Shields
Courses Plus Student 1,209 Points

img disappears when display:block rule is used...

The image on my About.html page disappeared, when I added the class and rules below (see code below). However, if I remove the display:block rule, the image reappears. Can anyone tell me why this is happening? Thanks!

/************************* PAGE: ABOUT **************************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

6 Answers

Wil Goolsby
Wil Goolsby
8,593 Points

There's nothing wrong with margin: 0 auto 30px;. This will add 0 margin to the top, auto to left and right, and 30px of margin to the bottom. Your CSS here is completely valid.

However, there is an odd issue with Firefox that hides img set to display:block;. A workaround is to set the image to inline-block, then on the containing element (i.e. <div class="profile"><img class="profile-photo" src="img/path_to_img.jpg"></div>) set the text-align to center. so your css would be:

.profile {
   text-align-center
}

.profile-photo { 
   display: inline-block; 
   max-width: 150px; 
   margin: 0 0 30px; 
   border-radius: 100%; 
}
Scott Moore
Scott Moore
4,050 Points
Scott Moore
Scott Moore
4,050 Points

Bernard, Looking at what you wrote. Looks like you should check your code. After 150px, you have margin: 0 auto 30px;. That's doesn't look correct. The 30px should not be there as it looks like its messing things up.

Scott Moore
Scott Moore
4,050 Points
Scott Moore
Scott Moore
4,050 Points

Wills right. It is valid. Had a brain fart on that one. Sorry

Wil Goolsby
Wil Goolsby
8,593 Points
Wil Goolsby
Wil Goolsby
8,593 Points

Sorry for the multiple edits. I had forgotten to do some Markdown stuff so you could see the HTML and css.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

The previous video has the correction for this in the teacher's notes. You can clear the floated header.

A better way is to have your wrapper element clear the floated header since that's the first element that comes after your header. This also fixes header gap problems that some people have been having.

Add to your existing #wrapper rule:

#wrapper {
clear: both;
}
Bernard Shields
PLUS
Bernard Shields
Courses Plus Student 1,209 Points
Bernard Shields
Bernard Shields
Courses Plus Student 1,209 Points

Scott, Wil and Jason,

Thank you all for your assistance!

Bernard