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

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

Michael Snyder
Michael Snyder
1,232 Points
Posted by Michael Snyder
Michael Snyder
1,232 Points

My photo it was not centered as in the video. Then when I add the display: block; my photo is gone.

When i added my photo to about.html i noticed that it was not centered as in the video. Then when i added the display: block; element to main.css the photo is not on the page. Once i remove that style in the CSS file the photo is back left justified.

https://w.trhou.se/2qyqn0k5dc

4 Answers

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Ok guys I found the solution to this FireFox problem. Nick actually has it in the Teacher's Notes under the video. Here are Nick'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%;
}
Valdas Stasevicius
Valdas Stasevicius
432 Points

Cheers Colin, it worked for me.

Francis Serpa
Francis Serpa
4,949 Points
Francis Serpa
Francis Serpa
4,949 Points

I was having the same problem. Thanks for the help!

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

No problem guys! As a friendly reminder, make sure to check the teacher's notes and question tabs under each video. I found the solution by googling the problem, and one of the results was actually a thread on this forum from 9 months ago that said to check Nick's notes for the FireFox fix. I should not have even needed to use google. Lesson learned, haha.

Samuel Benson
Samuel Benson
2,496 Points
Samuel Benson
Samuel Benson
2,496 Points

cheers Colin, looking for teachers notes from now on.. (didn't even know there were any!)

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

I just forked your workspace and previewed the about page. Everything looks normal to me and your photo is centered.

Michael Snyder
Michael Snyder
1,232 Points
Michael Snyder
Michael Snyder
1,232 Points

Must be a Fire Fox thing. I just opened with IE and everything looks fine. Thanks for looking at it for me.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

You're probably correct. I used Chrome to look at it.

Koltin Hall
Koltin Hall
1,184 Points

I'm having issues with this as well picture disappears when using firefox with the "display: block;" like added to the profile-photo class in my css. If someone has an answer to this lemme know. Thanks

John Snow
John Snow
923 Points
John Snow
John Snow
923 Points

Seems to be a problem with Firefox. I'm having the same issue, when I add the display: block; property the picture is gone. Firefox justifies the picture to the left. Try using a different browser :)

Valdas Stasevicius
Valdas Stasevicius
432 Points
Valdas Stasevicius
Valdas Stasevicius
432 Points

I am having the same issue with Firefox and display:block, as Firefox refuses to show the picture. Once the line removed, the image is justified to left. First lines of html/css and the first compatibility issue:)