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

CSS code display: block for .profile-photo

Hi Nick,

I followed along your tutorial on creating an about page for this project on Mozilla FireFox on version 27.0.1. Looks like the display: block; does not display the photo. However, I tried on Internet Explorer 11.0.3, Google Chrome Version 33.0.1750.146 m and Opera 20.0 and the code works as per you tutorial. Is there a bug in Moz FF? Or the browser does'nt support the code? Thanks!

14 Answers

Natasha McDiarmid
Natasha McDiarmid
11,400 Points

You didn't wrap the image in a div.

I'm seeing this:

.profile-photo {
    float: left;
    margin: 0 5% 80px 0;
}

That's going to change your layout from what it was because you have a float on the image. If you want the image above the copy like you had at the beginning, you need to remove the float on your profile-photo or add clear:both;.

Natasha McDiarmid
Natasha McDiarmid
11,400 Points

Did you specify the height and width of the image?

.profile-photo {

max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;

}

this code works with Google Chrome, IE 11 and Opera but not with Fire Fox

yeah in CSS

.profile-photo {

max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;

}

hey Natasha...sorry for the wait...uploaded the working file to the server....here's the link http://www.webvionics.com/test/index.html try it with different browser to see what i mean....thanks

Natasha McDiarmid
Natasha McDiarmid
11,400 Points

Try adding display:block to your image directly like so:

.profile-photo img {
    display: block;
}

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

hi Nat, the pic popped out but it won't center like google chrome. thanks

Natasha McDiarmid
Natasha McDiarmid
11,400 Points

Wrap your image in a div to get more control:

HTML:

<div id="about-img">
    <img class="profile-photo" align="middle" src="img/nick.jpg" alt="Photograph of Nick Pettit">
</div>
CSS: 

#about-img {
    margin: 0 auto;
    width: 150px;
}

i tried the suggestion u gave, but it totally changed the responsive layout, did you test with other browser?

Natasha McDiarmid
Natasha McDiarmid
11,400 Points

Can you throw up those changes on the link so I can see the real thing?

ok i've uploaded the files

wow thanks a lot! i did the changes as per below:

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

the "clear: both;" fixed the problem....

Natasha McDiarmid
Natasha McDiarmid
11,400 Points

Awesome! Good luck with the rest of it.

thanks for helping me out