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.

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

After applying display: block to .profile-photo the photo moves in first row (only in Firefox, but not in Chrome)

Here's my CSS of the /ABOUT PAGE/

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

Here's the HTML:

<div id="wrapper">
  <section>
    <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
    <h3>About</h3>
    <p>Hi, it's me, Mario, ... it's me, Mario.</p>
    <p>Hi, it's me, Mario, ... it's me, <a href="http://supermario.com/">@Mario</a>.</p>
  </section>

After applying display: block to .profile-photo the photo moves in first row besides the header, when i set it to display: inline it appears below like it should, but of course it is not centering properly. This happens only in Firefox, but not in Chrome.

Can yomeone please help me?! Thanx in advance!

3 Answers

Christian Lawrence
Christian Lawrence
3,941 Points

If you set the class to display block it will take up the whole row. If you set it to inline or inline-block it will display inline with any other siblings (h3 and p) which also have the same display property set, providing there is enough space in the parent container (section).

Shouldn't be a browser issue for this task, please provide a screenshot if this doesn't help.

thanks for your answer, i can understand that, but i still can't figure out about my issue. actually i don't know how to include a screenshot here..

Christian Lawrence
Christian Lawrence
3,941 Points

Use http://imgur.com/

Also when you use inline the browser adds a little space between elements. So two 50% objects might not fit in...it's weird, try lowering the width of one

Christian Lawrence
Christian Lawrence
3,941 Points

Seems like a tag might not be closed. Also on the image try

.profile-photo { clear: both; position: relative; width: 123px; margin: auto; }

You may have to put the image in a container DIV and apply that css, as image have an issue with center alignment.

<div class="profile-photo">
<img src="">
</div>

.profile-photo {
clear: both;
position: relative;
width: 123px;
margin: auto;
}

.profile-photo img {
 width: 100%;
}

didn't found any unclosed tag (it would work well if there's still a tag open, right?).

works good with the suggested CSS added, now it's the same in FF and Chrome. thanks! seems to be even no need for the extra div.

still don't know why the code explained in the video works well for Chrome but doesn't work for Firefox.

anyway, thanks a lot!!

I just encountered the same thing. Following along with the examples just fine, and my photo ends up in the top left corner of the screen next to the navigation section. Thought I had done something wrong, and isolated the display: block; line as the culprit.

Came here, found your post and on a whim tried it in Chrome. Works perfectly fine in Chrome, but not in Firefox, which is strange. Glad to see it's not just me.