Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Adding Pages to a Website Style New Pages

My image disappears when I add the css to customize the about.html page

As soon as I enter new css to customize the about.html page, the image (I'm using the nick.jpg) disappears from the page. my browser is firefox

Logan R
Logan R
22,989 Points

Can you please provide the code?

Try using proper mark-up by adding three ` before and after your code :)

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

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

/*************** COLORS ****************/

Does that look right? Everything is fine in the browser window until I start adding the about.html page. Am I missing something in one of the other tabs, maybe (index ?)

Could this possibly be a bug?

Logan R
Logan R
22,989 Points

It should work. Maybe someone else might be able to come along and know the problem. Sorry :/

OK Logan, thanks for your help.

4 Answers

Hey Marc, from the teacher's notes:

Correction for Firefox

There's a bug in the CSS for this video that causes the profile picture to display incorrectly in Firefox. In order to correct the issue, the clear > property with the value both needs to be applied to the .profile-photo class. Here's what the corrected code looks like:

.profile-photo {
 clear: both;
 display: block;
 max-width: 150px;
 margin: 0 auto 30px;
 border-radius: 100%;
}
Matthew Craig
Matthew Craig
6,340 Points

In the teacher's notes underneath the video, there's a note saying that there's a bug in firefox causing .preofile-pic to display improperly. The solution is to add clear: both; to the image. Hope that helps:)

BINGO!! That was it, Thanks so much Matthew, i appreciate it!

Thank you Dustin, as well!!