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 Responsive Web Design and Testing Adjust the Profile Page and Header

Su Fawkes
Su Fawkes
635 Points
Posted by Su Fawkes
Su Fawkes
635 Points

Code bug in firefox - no profile photo

Appears that this code is not cross compatible with firefox. I have set up the tree house downloads as a site on dreamweaver so no code errors. No profile photo appears at any screen width. It does work in chrome and explorer.

2 Answers

bleedcmyk
bleedcmyk
5,945 Points
bleedcmyk
bleedcmyk
5,945 Points

It seems to be an issue with firefox and display:block on an img. Putting the img in a div with the class .profile-photo and removing display:block fixes the issue in firefox. (Probably not the cleanest way of doing it, but maybe the easiest because it applies both border radius and centering with a single selector and only adds a small amount of HTML.)

<div class="profile-photo"><img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo"></div>

Kind of weird.

Su Fawkes
Su Fawkes
635 Points
Su Fawkes
Su Fawkes
635 Points

Thanks so much for the code shippet. Interesting that if I just do the following 

        <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
        </div>```

the photo appears but is not centered without the full code you suggest.

 ```<div class="profile-photo"> ```