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

Posted by Marc Anderson
Marc Anderson
Courses Plus Student 840 Points

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
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 :)

Marc Anderson
Marc Anderson
Courses Plus Student 840 Points

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

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

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

Marc Anderson
Marc Anderson
Courses Plus Student 840 Points

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 ?)

Marc Anderson
Marc Anderson
Courses Plus Student 840 Points

Could this possibly be a bug?

Logan R
Logan R
22,989 Points
Logan R
Logan R
22,989 Points

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

Marc Anderson
Marc Anderson
Courses Plus Student 840 Points

OK Logan, thanks for your help.

4 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

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
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:)

Marc Anderson
PLUS
Marc Anderson
Courses Plus Student 840 Points
Marc Anderson
Marc Anderson
Courses Plus Student 840 Points

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

Marc Anderson
PLUS
Marc Anderson
Courses Plus Student 840 Points
Marc Anderson
Marc Anderson
Courses Plus Student 840 Points

Thank you Dustin, as well!!